Goals

To understand why CSS technology is important.

Notes

The first thing to understand is what the goal is. Here is some HTML:

<h1><font color="red"><b>Warning!</b></font></h1>
<p><font color="#660000"><b>Don't eat yellow snow.</b></font></p>

You can see it here.

There are three types of information here. First, there's the content, that is, the text itself, like the warning. Second, there's the structure, the way elements are related to each other. For example, the <p> immediately follows the <h1>. Third, there's the formatting stuff, the colors, fonts, etc.

The idea behind CSS is to separate the formatting information from the rest. Check this out:

<h1>Warning!</h1>
<p>Don't eat yellow snow.</p>

This is just the content and the structure. Where is the formatting information? Here:

h1 {
    color: red;
    font-weight: bold;
}

p {
    color: #FF0000;
    font-weight: bold;
}    

This changes how the h1 and p tags are displayed. Have a look at this example here.

Usually the formatting information is put into a separate file. Then the CSS file is linked into the HTML file. Many HTML files can refer to the same CSS file.

Why is this CSS stuff a big deal? For two reasons. First, because the same CSS file can be used for a bunch o' HTML files. Change the one CSS file, and all of the HTML files look different. Woohoo! Using CSS makes sites much easier to maintain.

The second reason is that CSS manipulation is behind Web site interaction, like animated buttons, forms, graphs, and other things. This will become more clear in the JavaScript part of the course.

There are a bunch of things you need to know to use CSS effectively.

• How to link style sheets to CSS files.
• CSS descriptors that affect characters, like color, font-weight, font-size, etc.
• CSS descriptors that affect element "boxes," like padding, margins, and borders.
• How to apply CSS descriptions, through tags, classes, and identifiers.
• What HTML tags are particularly useful for CSS styling.

We'll only cover the basics in this course. There's a lot more material on the Web.

The rest of the lesson is divided up into three parts: using properties to change the way things look, using selectors to specify what properties apply to which elements, and then ways to learn more about CSS.

Exercises

Exercise 1.

Here are two sites: site 1 and site 2. They differ in some heading colors on various pages. Figure out how that difference was achieved.

Exercise 2.

Have a look at this page. Look at the code. You can see that moving the mouse over the paragraph changes several style properties at once: color, font face, etc. All the changes are grouped into one CSS class called irate.