CSS Set Up

Objectives:

Review HTML
Set up a link to the CSS file in HTML head.
Set up a simple wrapper.

File Location

For this lesson you'll be working in the following files:

   javascript-library
        └── 0-PreWork
            └── 1-HTML-Basics
            └── 2-CSS-Basics
                └── 00-setup.css 
                └── 00-setup.html
            └── 3-JavaScript-Basics
            └── 4-assets

Description

CSS (Cascading Style Sheets) is the language we use to tell the browser what elements in our HTML document should look like. It's common to hear HTML described as the skeleton of our document and CSS described as the skin. This is because HTML defines where elements are rendered, and CSS defines the characteristics of those elements.

Using the id and class attributes, we can use CSS to target a single specific element (id), or apply a style to all of the elements of a group (class).

You can use CSS to do the following:

Give the outside of the site a unique look and feel.
Alter colors, fonts, backgrounds, etc.
To implement some effects and light animations.

In the sample code, note that we're using a <link> tag inside of the <head> to tie a CSS file to our HTML. This is done in the <head> so that the browser will load the CSS file before it renders the HTML elements. Because the browser reads line-by-line, if we loaded the CSS file at the bottom of the page, then the HTML will have already rendered and the result may be a negative experience for our users. This is especially evident on a slow connection, because all of the processes (including loading CSS) simply take longer to make their way down the wire.

Sample Code

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Notes</title>
    <link rel="stylesheet" type="text/css" href="00-setup.css" />   
  </head>
  <body>
  <h1>CSS Notes</h1>
    <div class="wrapper">
      <h2>CSS Statements</h2>
      <p>Four main components include the following: </p>
      <ol> 
        <li><b>Declaration: </b>the statement as a whole with curly braces.</li> 
        <li><b>Selector:</b> the name of the part you want to style.</li>
        <li><b>Property:</b> properties to edit(e.g., width, height, background, etc.)</li>
        <li><b>Value:</b> numbers, colors, urls - values that we assign. </li>
      </ol>
      <p>Here's a photo to illustrate these items:</p>
      <img src="../4-assets/anatomy_css_rule.gif" id="css-photo" >
    </div>
  </body>
</html>

In the above code, we've assigned a class.

Adding CSS

In the 00-setup.css file, add the following code:

body {
    background-color: #D3D3D3;
}

.wrapper {
    border: 10px solid red;
}

You should see a different background color, and you should see an awesome red border after you save both files and load the HTML to your browser.

Comments in CSS

Here's how to do a comment in CSS:

/*This is a CSS comment*/
body {
    background-color: #D3D3D3;
}

/*This is another CSS comment*/
.wrapper {
    border: 10px solid red;
}

Discussion

In this lesson, we've introduced the concepts of class and id, as well as shown how (and just as importantly, why) to add a CSS file to the head of an HTML document. We've also made you aware of class and id, which we'll explore in greater depth in the following lessons.

Challenge

Previous3-CSS Basics Nextclass

Last updated 7 years ago

File Location

For this lesson you'll be working in the following files:

   javascript-library
        └── 0-PreWork
            └── 1-HTML-Basics
            └── 2-CSS-Basics
                └── 00-setup.css 
                └── 00-setup.html
            └── 3-JavaScript-Basics
            └── 4-assets

Description

Using the id and class attributes, we can use CSS to target a single specific element (id), or apply a style to all of the elements of a group (class).

You can use CSS to do the following:

Give the outside of the site a unique look and feel.

Alter colors, fonts, backgrounds, etc.

To implement some effects and light animations.

At this point, let's go ahead and grab another image to visualize how a .css statement is written. Go and save the image to your 4-assets folder.

Sample Code

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Notes</title>
    <link rel="stylesheet" type="text/css" href="00-setup.css" />   
  </head>
  <body>
  <h1>CSS Notes</h1>
    <div class="wrapper">
      <h2>CSS Statements</h2>
      <p>Four main components include the following: </p>
      <ol> 
        <li><b>Declaration: </b>the statement as a whole with curly braces.</li> 
        <li><b>Selector:</b> the name of the part you want to style.</li>
        <li><b>Property:</b> properties to edit(e.g., width, height, background, etc.)</li>
        <li><b>Value:</b> numbers, colors, urls - values that we assign. </li>
      </ol>
      <p>Here's a photo to illustrate these items:</p>
      <img src="../4-assets/anatomy_css_rule.gif" id="css-photo" >
    </div>
  </body>
</html>

In the above code, we've assigned a class.