Mulder's Stylesheets Tutorial
Lesson 1
by Steve Mulder

Page 3 — Your First Stylesheet

It's about time we get to the good stuff! Launch your favorite HTML editor and create a basic Web page:

<HTML> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

Very fancy. Now let's add some stylesheets. Simply insert the following code anywhere within the <HEAD></HEAD> tag:

<STYLE TYPE="text/css">  </STYLE>

Open the page in your browser, and here's what you'll see:

Stylesheets: The Tool of the Web Design Gods

Amaze your friends! Squash your enemies!

Click here to see how it would look if your browser doesn't support CSS.

Congratulations! You just created your first stylesheets-enhanced Web page.

(If the "Amaze your friends!" line doesn't have yellow behind it, then you'll need to update your browser or you won't be able to complete this tutorial. Netscape Communicator or Internet Explorer, version 4 or higher, is recommended.)

Some Terminology

Let's look at what's going on in this newfangled code. At the core of cascading stylesheets are rules. The simplest kind of rule looks like this:

H1 { color: green }

This rule tells the Web browser that all text surrounded by <H1></H1> should be displayed in green.

Each rule consists of a selector and a declaration. In the example above, H1 is the selector. It's the HTML tag that the style is being attached to. The declaration defines what the style actually is, and it also consists of two parts: the property (in this case, color) and the value (green).

Any HTML tag can be used as a selector. Thus, you can attach stylesheet information to any kind of element, from normal <P> text to <CODE> and <TABLE> content. You can even use some cascading stylesheet properties on graphics by applying them to <IMG>.

And as you can see from our first stylesheets example, you can also group rules together. Earlier, we set three different declarations all at once for <P>.

Similarly, you can group selectors:

H1, P, BLOCKQUOTE { font-family: arial }

This rule specifies that all text within <H1>, <P>, and <BLOCKQUOTE> tags will display in the Arial font.

Inheritance

Stylesheets rules are inherited from "parent" to "child." Let's look at an example:

B { color: blue }

This rule tells the browser that all text within <B> should be blue. But what does the browser do in the following situation?

<B>All my Web pages will use cascading stylesheets within <I>four</I> weeks.</B>

There's no rule set for the <I> tag. But since here it occurs within the <B>, it inherits the latter's declarations. So, the child displays in blue, just like its parent:

All my Web pages will use cascading stylesheets within four weeks.

OK, now we know how basic stylesheets rules work. We've also seen one way to add stylesheets to Web pages, but there are other methods. Let's take a look.

next page»