Mulder's Stylesheets Tutorial
Lesson 1
by Steve Mulder

Page 4 — Adding Styles

There are actually four methods you can use to add styles to your page, each with its own benefits:

Embed a stylesheet within the HTML document.
Link to an external stylesheet from the HTML document.
Import an external stylesheet into the HTML document.
Add styles inline in the HTML document.

Embedding a Stylesheet

This is the method we used on the previous page. All the stylesheets information lives at the top of the HTML document, separated from the <BODY> of the HTML code. Here's a refresher of what the code looks like:

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

When stylesheets rules are embedded, browsers honor them for the length of the HTML page. When you want to add stylesheets one page at a time, this is the way to go.

You probably noticed two curiosities in this code: the TYPE="text/css" attribute and the comment tags. TYPE="text/css" specifies the MIME type so browsers that don't support CSS can ignore stylesheet code altogether. Use it.

The comment tags () are even more important. Some older Web browsers (such as IE 2.0 for Mac) won't recognize stylesheets code in spite of the TYPE="text/css" attribute and will display the stylesheets code itself! This is not a good thing. Use comments, and this snafu will never happen.

Linking to a Stylesheet

Here's where stylesheets start to get powerful. Instead of embedding stylesheets code one page at a time, you can point multiple HTML documents to one central stylesheets document. This external file will set the rules for all of your Web pages. If you change a detail such as the font size in the stylesheets file, all of your pages will instantly reflect that change. If you maintain a large site, this feature is heaven.

Here's how it works: Create your Web page normally but instead of the <STYLE> tag, use the <LINK> tag within the <HEAD>, like so:

<HTML> <HEAD> <TITLE>My First Stylesheet</TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

(With a linked stylesheet, you don't have to use comment tags.)

Now create a separate text file called mystyles.css (you can name it anything you want). All it contains is this:

H1 { color: green; font-family: impact } P { background: yellow; font-family: courier }

Upload this CSS file to your server the same way you would an HTML file. When you view the page in your favorite browser, you'll see that the browser has followed the <LINK> tag and honored all of its stylesheets rules in the HTML page. You can link to the same stylesheets file from an unlimited number of HTML documents, and you can use relative or absolute URLs with the HREF attribute.

Importing a Stylesheet

Importing an external stylesheet works similarly to linking. The difference is that you can't combine the linking method with other methods, whereas you can combine importing with other methods. Let's look at an example:

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

Let's say that the company.css file looks like this:

H1 { color: green; font-family: times } P { background: yellow; font-family: courier }

In this example, the browser first imports the company.css rules (the @import line must always be first) and then adds the embedded rules to it to get a collection of rules for the entire page.

Notice, however, that H1 has a rule both in the external stylesheets file and in the embedded styles. What does the browser do in the face of this conflict? The embedded rules win out, and the text displays as orange Impact:

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 didn't support CSS.

The flexibility of importing stylesheets is wondrous. You can import as many stylesheets files as you want and override them with embedded styles as desired.

Unfortunately, Web browsers have been slower to support this method of adding stylesheets to Web pages. Only IE 4 and 5 support importing, so I recommend avoiding it for the time being.

Adding Styles Inline

Finally, you can also add styles inline, which means inserting stylesheets rules right in the middle of all your HTML. It might look like this:

<HTML> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1> <P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

In this scenario, you wouldn't need any stylesheets code at all at the top of your HTML document. The inline STYLE attribute would give the browser all the information it needs.

The big downside here is that you have to add the inline style code every single time you want to use it. The next <H1> text after this one would revert back to the default browser display unless you add another STYLE attribute.

Inline styles are considerably less powerful than embedded, linked, and imported styles, but you might find some use for them. For example, if all your paragraphs are styled with a linked stylesheet but you want to override the style of one paragraph, you can use inline style to do so.

Remember, you can use more than one of these methods at a time. In fact, the power of stylesheets lies in combining the ways that styles are added to pages.

next page»