Lesson Tuesday

I'll be the first to admit it: the web pages we've made so far are pretty ugly. Let's learn our first CSS, which stands for Cascading Style Sheets. They're called cascading because often a single element on a webpage will have multiple sources that style it, and CSS resolves those differences to create the style you see on the screen. But we'll get into more of that later.

Note: if trying to make something look pretty is your idea of an awful time, don't worry: This isn't a design course! We're going to learn enough about styling to get you to the point where you can apply styles that other people develop without having to do any design yourself. And if you love design and want to learn more, I'll point you in the right direction at the end of this section.

Let’s return to our my-first-webpage project folder. Go ahead and make a folder called css inside of your my-first-webpage project folder. Create a new file in that css folder called styles.css.

Here's what our my-first-webpage directory structure should look like now:

directory structure with css folder

Now the first thing we need to do is to tell our HTML document to use this file for its CSS. Note that the link below says css/styles.css because in relation to this favorite-things.html file, the styles.css file is in a subdirectory named css. If the styles.css file were in the same directory as the favorite-things.html file, then the link would just be to "styles.css" rather than to "css/styles.css".

favorite-things.html
<head>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <title>Michael's favorite things</title>
</head>

I'm leaving out everything above and below the <head> tag for the sake of brevity.

In our styles.css file, let's add our first bit of CSS:

styles.css
h1 {
  color: blue;
}

Now, if we refresh the page, our header is blue!

What we just wrote is called a CSS rule. The h1 part is called a selector, because it selects the HTML elements that the rule applies to. The color is called a property, and then blue is called a value.

Once again, notice the indentation: the property and value are indented two spaces, because they are inside the selector.

Let's add some more rules:

styles.css
h1 {
  color: blue;
  text-align: center;
}

h2 {
  font-style: italic;
  text-align: center;
}

p {
  font-family: sans-serif;
}

ul {
  font-size: 20px;
  line-height: 30px;
}

This should be mostly self-explanatory, but here are a couple notes.

px is short for pixels, which are a unit of measurement.

Sans Serif is a kind of font.

Named colors, like the blue we used for our h1, aren't used very commonly. Instead, it's more typical to use a three- or six-digit hexadecimal code like this:

h1 {
  color: #00f;
}

or like this:

h1 {
  color: #0000ff;
}

Both of these are equivalent to the named color blue. If you use a graphics program, it usually can tell you the hex code for the colors you're using. There are also a lot of online tools for picking colors and getting their hex codes.

Finally, you might be wondering why we made our <h2>s italic in CSS instead of just adding the <em>. The reason is two-fold. First, we can modify the <em> tag just like any other HTML tag. Remember, <em> stands for emphasize, and at some point, we might decide that things that need emphasis should be bolded in addition to being italicized, which we might not want for our <h2>s. Second, one of the great advantages of CSS is that it makes it easy to change styles in many places at once. Let's say we use an <em> tag inside our <h2>s to make them italic. If we later change our mind and want them to be bold, we have to remove all of the <em> tags and replace them with <strong> tags. By using CSS instead, we only have to change the one CSS rule, and every single <h2> on every single web page that uses this CSS file will be updated.

My apologies for the long lecture, but this last point is really important. Building web sites is fundamentally different from building physical things. When you finish building a bridge, you're more or less done: there's not much you can change besides a coat of paint. But when you finish building a website, you've only just begun. There will be additions, deletions, changes, redesigns, and a whole lot more. CSS gives us some powerful tools to make it easier to change what we've built. If you remember nothing else, remember this: good code is code that is easy to change.

To see the beauty of using CSS, check out CSS Zen Garden. On the right side of the page, clicking one of the links will apply a different stylesheet to the same HTML. The page is totally transformed - no changes to the HTML needed. Your goal in writing CSS should be to allow to Zen Garden-style changes to your styles.

If you're following along and your CSS file isn't actually adding styles to your web page, see the next lesson, which introduces debugging.

Terminology


  • CSS: Stands for Cascading Style Sheets. A language used to program the visual appearance of HTML elements.

  • Rule: A block of CSS that details particular stylistic instructions to be applied to an HTML element.

  • Selector: The part of a CSS rule that determines which HTML elements the rule applies to.

  • Property: The characteristic a CSS rule is altering. (For example, color, or font-size).

  • Value: The attribute a CSS rule is applying to the specified property.

Examples


styles.css
h1 {
  color: #0000ff;
  text-align: center;
}

h2 {
  font-style: italic;
  text-align: center;
}

p {
  font-family: sans-serif;
}

ul {
  font-size: 20px;
  line-height: 30px;
}

In the code above...

  • Each individual block is a rule.
  • h1, h2, p, and ul are all selectors.
  • color, text-align, font-style, font-family, font-size and line-height are all properties.
  • blue, center, italic, sans-serif, 20px and 30px are all values.
  • The entire file styles.css is a stylesheet.

Additional Resources