External Styles and the Cascade

Topics on This Page

External Styles
The Cascade
Example

External Styles

One of the big advantages to CSS is the ability to place your style information in an external file. Each of your HTML pages can refer to this external file. This lets you place most if not all of your style information into one place. It makes it easy to achieve a consistent look to your pages, and also makes it much easier to make changes that you want to apply to all your pages.

There are two methods for referring to an external file. You can use a <link> tag, or you can use an @import within the <style> code. Netscape 4 doesn't recognize @import, so it's best to use the <link> method. On the other hand, @import can be handy for importing CSS code that works well in IE but not in Netscape 4.

You create the external file with an extension of ".css". Put only CSS rules in the .css files — don't include any HTML tags, not even <style>.

Here's an example of how a .css file might look:

p  { color: blue; }

h1,h2,h3,h4,h5,h6 { color: red; }

If you've named the file mystyles.css, you would then refer to it in your HTML files by placing the following <link> tag in your head section:

HTML:   <link rel="stylesheet" type="text/css" href="mystyles.css">
XHTML:  <link rel="stylesheet" type="text/css" href="mystyles.css" />

   Note: The XHTML format DOES NOT work in HTML in some browsers,
         and causes an error message by the validator.

The Cascade

The "Cascading" in the name "Cascading Style Sheets" refers to the way that style information can come from many different sources. Some sources are "higher" level than others, and properties specified at higher levels cascade down to lower levels.

The cascading rules can get quite complex. I'm not going to try to cover all of the possibilities here. I'm just going to provide enough information that you'll be able to figure out how the cascading rules apply in most cases.

The style Attribute

The lowest level of the cascade is the style attribute, which can be used in almost every HTML tag.

<style type="text/css"> <!--
  p { color: blue; font-weight: bold; }
--> </style>
  .
  .
  .
<p style="color: red;">Text</p>

The paragraph in this example will be colored red: the color specified in the style attribute overrides the color specified earlier in the <style> tag. But the paragraph will still be displayed in bold because the style attribute does not include an overriding font-weight property.

External CSS Files

An external CSS file is higher than a <style> tag, so properties in a <style> tag will override those in the external file. For example, say you have a file named mystyles.css that contains the following:

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

And say you have the following in your head section of the HTML file:

<link rel="stylesheet" type="text/css" href="mystyles.css" />
<style type="text/css"> <!--
  p { color: blue; }
--> </style>

Your paragraphs will be colored blue because the rule in the <style> tag overrides the higher-level external file. Your paragraphs will still be bold, because the font-weight property has not been overridden.

Later Properties Override Earlier Ones

What happens when you have conflicting information? Look at the following:

<style type="text/css"> <!--
  p { color: blue; font-weight: bold; }
  p { color: red; }
--> </style>

Your paragraphs will be red and bold. Because red is specified after blue, it overrides the blue, but the bold font-weight remains in effect.

More Specific Properties Override Less Specific Ones

Let's look at another case.

<style type="text/css"> <!--
  p span { color: blue; }
  span { color: red; font-weight: bold; }
--> </style>
  .
  .
  .
<p><span>Text</span></p>

What color will the text be? Will it be bold? Take a guess.

You might think the text will be red and bold because the red/bold rule comes after the blue rule. But the text will actually be blue and bold. The bold comes from the second rule, since the first rule doesn't override it. But the blue comes from the first rule because the first rule is more specific. The second rule applies to any old <span> tag, while the first applies specifically to <span> tags that are located inside <p> tags.

Using class

Let's look at one more case.

<style type="text/css"> <!--
  p { color: red; font-weight: bold; }
  .blue { color: blue; }
--> </style>
  .
  .
  .
<p class="blue">Text</p>

Here, the paragraph will be blue and bold. Because we've specified a class in the <p> tag, anything specified for that class overrides anything else that would apply otherwise.

I've only scratched the surface of the cascading rules, but what I've presented covers most of what you're ever going to want to do.

Example

This example illustrates overriding properties. Two versions are provided.

The first version refers to a .css file named css03a.css that contains the following:

p  { color: blue; font-weight: bold; }
h1 { color: red; }
h2 { color: green; }
b  { color: purple; }
.a { color: navy; }
.b { color: black; }

Netscape 4 may not be able to display this HTML with the <link> tag. The second version includes the statements in the <style> tag rather than using <link>. This produces the same results.

Make sure you understand why each element is displayed the way it is.

This example has a strict doctype. Verify that the code validates to strict, except that the validator complains because the <link> tag ends with />. Verify that this message goes away when you eliminate the slash.