CSS 101

How Does CSS Work?

CSS defines the appearance of our elements by defining the style attribute that we mentioned in the previous lesson. By doing adding CSS, we can specify our elements' size, position, color, and much more. Copy the following code and place it into your HTML file (replacing any existing code):

<!DOCTYPE html>
<html>
<head>
  <title>CSS 101</title>
</head>
<body>
  <div id="section name" style="background-color: yellow;">
  <h2 style="color: blue;">Blue Text</h2>
  <p style="text-align: center;">Centered Text</p>
  <p style="font-family: calibri;">Calibri Font</p>
  <p style="font-size: 40px; font-weight: bold;">Large Bold Text</p>
</body>
</html>

Save the file and refresh the web browser. The page should look like this:

Blue Text

Centered Text

Calibri Font

Large Bold Text

It doesn't look great, but you get the idea.

Properties & Values

In the example above, we assigned values to the properties of the style attribute of the element. That's quite a mouthful, so let's break it down visually.

Element Property Value
div background-color yellow
h2 color blue
p text-align center
p font-family calibri
p font-size, font-weight 40px, bold

Notice that in the last line we specified two style properties. There are many more, and we can define all of them to get the exact look we want. Play around various style properties and values. Try some of these examples:

Property Description Example
Margin The space around an element style="margin: 20px;"
Padding The space inside an element style="padding-top: 20px;"
Width The width of an element style="width: 100px;"
Height The height of an element style="100%;"
Border The border surrounding an element style="border: 2px solid red;"
Font-Style The style of the text in an element style="font-style: italic;"

Separating HTML & CSS

We could customize a web page by changing the style of each element line by line, but this is highly inefficient. Instead, we can use CSS to define the style of all elements of a certain type, class or id. Copy the following code into your file (replacing any existing code):

<!DOCTYPE html>
<html>
<head>
  <title>CSS 101</title>
  <style>
    body {
      background-color: #424242;
      color: #424242;
      font-family: helvetica;
    }
    h1 {
      background-color: #ff9900;
      font-style: italic;
      padding: 20px;
    }
    p {
      background-color: #3399bb;
      text-decoration: underline;
      font-size: 20px;
      padding: 20px
    }
    .light-text {
      color: #e9e9e9;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <h1 class="light-text">Heading Light</h1>
  <p>Paragraph</p>
  <p class="light-text">Paragraph Light</p>
</body>
</html>

Save and refresh your browser. The page should look something like this:

Heading

Light Heading

Paragraph

Light Paragraph

So now we've separated the elements from the style—the HTML from the CSS. Notice that we've styled both the h1 and p elements as well as the light-text class. Styling classes allows us to display the same element in a different way depending on what class (or classes) we assign to it.

Try changing some of the values, styling additional elements, and creating your own classes. Before moving on, you should understand how to use CSS to customize the look of HTML elements.

Continue to Next Lesson »