Beginner Tip:
Clash of the Style Sheets

by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.

If you are new to Cascading Style Sheets, then you've probably run into trouble with conflicting styles. When two or more styles apply to the same page element, which style wins? The answer helps explain why they're called "Cascading" Style Sheets.

Three Ways To Style Your Page

There are three common ways to tie a CSS property to an element on your page:

1. Method 1: By tying it to all HTML tags of a specific type
2. Method 2: As part of a CSS class
3. Method 3: As an in-line style tied to one specific tag

As an example of Method 1, suppose we want to set all text paragraphs on our page to be blue. We could use this style rule to do so:

<STYLE>
P { color : blue }
</STYLE>

This assigns the color blue to all P (paragraph) tags on our page.

We could also use Method 2 by creating a CSS class and assigning a style to it as shown below:

<STYLE>
.navtext { color : white; font-weight : bold }
</STYLE>

Note the dot in front of the word "navtext," which tells your browser that this is a CSS class. Classes are handy when you want a style to apply to portions of your page. In this case let's say that we're defining a different text style to be used on our page's navigation bar.

To apply this style to our navigation bar, we set the CLASS attribute of each paragraph in the navigation area:

<!-- Start of page navigation -->
<P CLASS="navtext">Link 1</P>
<P CLASS="navtext">Link 2</P>
<P CLASS="navtext">Link 3</P>
<!-- End of page navigation -->

Method 3 for applying a CSS property is through the use of an in-line style. This type of style declaration applies to only one specific element on our page. You can do this by setting the STYLE attribute of the tag you want to stylize.

For example, suppose we want the first link on our navigation bar to appear in red text. To do so, we could change the previous HTML code to look like this:

<!-- Start of page navigation -->
<P CLASS="navtext" STYLE="color : red">Link 1</P>
<P CLASS="navtext">Link 2</P>
<P CLASS="navtext">Link 3</P>
<!-- End of page navigation -->

Now Link 1 should appear in red text.

Which Style Wins?

However, if we use all three of the methods above on the same page, then we've created conflicting styles for Link 1. We've told the browser to render it in three different colors: blue, white and red. So which color will it be?

The answer is: red.

We also have a conflict for Link 2 and Link 3, since we've told the browser that they should be both blue and white. Which color will they be?

In this case the answer is white.

When resolving style conflicts, your browser will always let the most specific style rule win. This behavior is part of the CSS specification, so all browsers will resolve style conflicts the same way.

In our example we have a very general style rule that says "all paragraphs should be blue;" we have a more specific rule that says "some paragraphs should be white;" and we have a very specific rule saying "Link 1 should be red." So white beats blue, and red beats everyone.

This sort of conflict is normal when working with CSS, and the hierarchy for resolving conflict between several layers of styles was built into the CSS specification by its original authors. That's why they're called "Cascading" Style Sheets.

Accord and Discord

Notice one more thing about our example: the "navtext" class declares that its text should be bold as well as white. Since navtext lost its conflict with our in-line style, will Link 1 be still appear in bold?

Yes, it will. Style conflicts are resolved for individual properties. Style rules that lose a conflict are not thrown out. Instead, those portions of the rule that conflict with other rules may simply to superceded.

A Word of Caution

Keep in mind that not all browsers support all parts of the CSS language, so browser compatibility problems are common. Just because your styles work under Internet Explorer Version 6 doesn't mean they will work for older versions of IE. And don't forget that Netscape 4 supports a very limited set of CSS properties.

While you are generally safe using style sheets to set your page fonts, be careful about using CSS to control page layout, to set text margins, or to decorate page elements with borders and backgrounds. Whenever you use style sheets, it's a good idea to let HTML Toolbox test your page and check its Browser Compatibility report for problems.