HTML 4.01 Tutorial : Style Sheets

Style Sheets

So far we've dealt with two major components to our web pages: the tags, which define the basic structure of the page, and the styling, which further refines how the page should look. We saw the effects of styling in the Colors section:

Red Paragraphs (`source`)

<p>
  Happy Fun Ball -- Fun for the whole family!  
  Only $14.95!
</p>
<p style="color: red">
  WARNING: Pregnant women, the elderly and 
  children under 10 should avoid prolonged 
  exposure to Happy Fun Ball. 
</p>

The <p> tag tells us that we have two paragraphs. The style="color: red" attribute indicates that the second paragraph should be colored red.

Now, it's nice that we can make red paragraphs -- but what if we wanted all paragraphs to be red? It would be a pain to have to specify this every single time. Fortunately, there is a solution: the style sheet.

What are Style Sheets?

Every time we've specified style="(something)", we've actually created a CSS rule. CSS (Cascading Style Sheets) is a separate language from HTML proper. However, CSS is an indispensable tool for anyone working with HTML; it augments your ability to design webpages and enables you to write more elegant and compact code.

So far we've only been working with individual styles applied to individual tags. This works, but it is by no means the most efficient way to apply our styles. We can collect all our styling rules in one place (a style sheet) and then apply the style sheet to every single tag on the page... or for that matter, every single tag throughout the entire website. Let's see how this works.

Embedded Style Sheets

An embedded style sheet affects every tag on the page. In order to create an embedded style sheet, we need to go to the <head> of the document. (Remember the <head> tag?) Let's see an example:

All Green Paragraphs (`source`)

<html>
<head>
  <title>When Irish Eyes Are Smiling</title>
  <style type="text/css">
  <!--
    p {color: #008000; background: #ffff00}
  -->
  </style>
</head>
<body>
<p>
  Here's how the chorus goes:
</p>
<p>
  When Irish eyes are smiling,<br>
  Sure, 'tis like the morn in Spring.<br>
  In the lilt of Irish laughter<br>
  You can hear the angels sing.<br>
  When Irish hearts are happy,<br>
  All the world seems bright and gay.<br>
  And when Irish eyes are smiling,<br>
  Sure, they steal your heart away.<br>
</p>
</body>
</html>

The effect is rather ugly, but it demonstrates how style sheets work:

All Green Paragraphs (Results)

Here's how the chorus goes:

When Irish eyes are smiling,
Sure, 'tis like the morn in Spring.
In the lilt of Irish laughter
You can hear the angels sing.
When Irish hearts are happy,
All the world seems bright and gay.
And when Irish eyes are smiling,
Sure, they steal your heart away.

The syntax is a little different from what we are used to, but the core idea (the CSS rule) should look familiar. Let's examine the style sheet's components:

<style type="text/css">: The <style> tag indicates the beginning of the style sheet. It must go between the document's <head> and </head> tags.

The <style> tag has a type attribute that is required by the specification. This attribute says that you are using a CSS style sheet, as opposed to using some other, yet-to-be-invented style sheet language.
<!--: This is an HTML comment. Some browsers do not understand CSS. These browsers fall into a couple of categories:
- They are old, having been created before the development of the first CSS standard.
- They are text-only. These simplified, fast browsers dont bother with styling directives and images -- they serve up only the raw text.
Either way, you have to account for non-CSS browsers. HTML comments allow you to avoid the unfortunate situation where the browser displays your CSS directives at the top of the page. This situation might be rare, but regardless, it is still good form to put the comments in.
p: The CSS selector. This says, "do something to all <p> tags."
{color: #008000; background: #ffff00}: The CSS declarations. Together with the selector ("p"), they constitute a CSS rule: make all paragraphs green text with a bright yellow background. Note that we have two declarations; you must separate multiple declarations with a semicolon.

Now, we could have applied these declarations to the style attribute of each paragraph, and they would have appeared the same. The key difference is that the style sheet affects all paragraphs, not just one. We specify the rule in one place, and it works on all tags that match the selector.

Multiple CSS Rules

You may specify as many rules as you like in a style sheet. Consider the following:

Green Paragraphs, Red Body (`source`)

<head>
  <title>When Irish Eyes Are Smiling</title>
  <style>
  <!--
    body {background: #ff0000}
    p {color: #008000; background: #ffff00}
  -->
  </style>
</head>

Here we've specified that the body of the page should have a red background, while all paragraphs should have a yellow background with green text. The effect is so garish that I am loathe to provide the output on this page; let's move on.

Style Sheet Cascading

What happens when CSS rules conflict? Here's where the "Cascading" part of Cascading Style Sheets comes in. The rules are somewhat complicated (here they are in all their glory). But they basically boil down to "whichever CSS rule is 'nearer' or 'more specific' wins." Let's return to our song lyric example. Let's say we didn't want the first paragraph to be in green text:

One Green Paragraph (`source`)

<html>
<head>
  <title>When Irish Eyes Are Smiling</title>
  <style>
  <!--
    p {color: #008000; background: #ffff00}
  -->
  </style>
</head>
<body>
<p style="color: #000000">
  Here's how the chorus goes:
</p>
<p>
  When Irish eyes are smiling,<br>
  Sure, 'tis like the morn in Spring.<br>
  In the lilt of Irish laughter<br>
  You can hear the angels sing.<br>
  When Irish hearts are happy,<br>
  All the world seems bright and gay.<br>
  And when Irish eyes are smiling,<br>
  Sure, they steal your heart away.<br>
</p>
</body>
</html>

The first paragraph has black text. Our style attribute is more specific than the general page-level CSS, and so the black-text rule overrides the green-text rule.. However, the paragraph still has a yellow background -- the yellow-background rule cascades down to this paragraph, because we didn't specify anything about it.

One Green Paragraph (Results)

Here's how the chorus goes:

Parent-Child Cascading

Another important cascading rule is that parent tags apply their style to their children (enclosed tags). Rules applied to the <body> tag cascade down to enclosed <p> tags. Rules applied to <p> tags cascade down to enclosed <em> tags. And so on. In fact, we saw this form of cascading in the Green Paragraphs, Red Body example above. The background of the page would be red, and any child elements would have a red background... except for paragraphs, which override this rule.

Global Style Sheets

What's better than applying styles to an entire page? Applying it to an entire website. A global style sheet is a separate file -- a central repository of CSS rules that we can apply to multiple pages in a site. There are two ways to "call" a global style sheet into a given page:

The "link" Method

<html>
<head>
  <title>When Irish Eyes Are Smiling</title>
  <link rel="stylesheet" href="/styles/style1.css" 
             type="text/css">
  <link rel="stylesheet" href="/styles/style2.css" 
             type="text/css">
  <style>
  <!--
    p {color: #008000; background: #ffff00}
  -->
  </style>
</head>

The "@import" Method

<html>
<head>
  <title>When Irish Eyes Are Smiling</title>
  <style>
  <!--
    @import url("/styles/styles3.css");
    @import url("/morestyles/styles4.css");
    body {background: #ff0000}
    p {color: #008000; background: #ffff00}
  -->
  </style>
</head>

The two methods have bizarrely different syntax, but functionally they are about the same. They both allow you to specify multiple stylesheet files, and you may use them both in conjunction with an embedded style sheet. The only major difference is that the "@import" method is not supported in some older browsers, such as Netscape 4. (This is actually an advantage, because often you'll want to hide styles from Netscape 4.)

In the next section, we'll explore style sheets further and learn finer control over CSS selectors.

Next: Classes and IDs

Table of Contents