CSS 101: Handling multiple rules for the same element

by Tony Patton | Mar 05, 2007 2:43:00 PM

Tags: Web browsers, Tony Patton, style sheet, CSS, declaration, Web browser, Web Development Zone Newsletter

Takeaway: Tony Patton focuses on CSS fundamentals and explains how multiple rules for the same element are handled. Multiple rules ensure that there will be no surprises for either you or the user community.

One of the more important details of understanding and using Cascading Style Sheets (CSS) is the cascading aspect of its name. That is, how are multiple rules for the same element handled? This week, I explore this feature of CSS with details and examples.

Precedence

CSS properties take precedence over HTML attributes. You can use HTML attributes in browsers without CSS support, but they have no effect in browsers with CSS support. When working with CSS, it is important to understand the point of view or origin of a CSS rule.

Origins

There are two perspectives when considering how CSS rules are applied. The first is the reader that corresponds to the user viewing a Web application via their preferred browser. The second is the author, which is the actual Web developer that developed the Web application.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

A reader's preferences are handled by the user. That is, they can develop their own style sheet and assign it via browser settings. As an example, Internet Explorer 6 users can use their own style sheet by specifying a User Style Sheet via the Tools | Internet Options | Accessibility menu. Once specified, the reader's browser merges the specified rules with that of a Web application. The Web developer specifies rules by developing his or her own CSS and using it in the page. Browsers often have built-in rules as well.

Cascade

The cascading aspect of the CSS acronym refers to this process of merging and overriding of rules from different sources. When multiple style sheets are used, they will fight over control over selectors that are defined in each sheet. The following list specifies the order by which conflicting style sheet selectors are processed, with the first item being the most important:

Important: Are selectors designated as important?
Rule origin: Where is it defined?
Specificity: How specific is the rule?
Order: What was defined last?

Important
The important declaration allows you to increase the weight of a declaration. Declarations with an increased weight override their normal or non-important counterparts. If both the reader's and the author's style sheet contain statements with important declarations, the author's declaration overrides the reader's declaration. The following example demonstrates declaring a CSS property as important.

<html><head>

<title>Cascading</title>

<style type="text/css">

H1 {font-face: arial; font-size: 12pt; color: red ! important;}

</style></head>

<body>

<h1 style="color: blue;">TechRepublic.com</h1>

</body></html>

In the previous example, you will notice that the assignment of the color red to H1 elements is always used since it is declared as important. It is worth noting that when an item is declared as important in both reader and author style sheets, then the author's declaration will override the reader's declaration.

Rule origin
A Web user can create and use his or her own style sheet. In this scenario, there will be conflicts between the user's style sheet and a Web application's style sheet. When these conflicts occur, the Web application's settings win when all elements have a normal weight. The important declaration can be used with it winning when its counterpart is not important, but items declared as important on both sides means the Web application's setting wins again.

Specificity
When dealing with the specificity of a CSS rule, the more specific rule wins. So, if the selectors are the same, then the last one wins, so the following example always defines H1 elements as green.

<html><head>

<title>Cascading</title>

<style type="text/css">

H1 {color: red;}

H1 {color: green;}

</style></head>

<body>

<h1>TechRepublic.com</h1>

</body></html>

On the other hand, the following example has a more specific definition for H1 elements contained in BODY elements, so the H1 element is displayed as red.

<html><head>

<title>Cascading</title>

<style type="text/css">

BODY H1 {color: red;}

H1 {color: green;}

</style></head>

<body>

<h1>TechRepublic.com</h1>

</body></html>

The more specific a selector, the more preference it receives when rendering a page. Actually, there are rules for calculating an item's specificity. Basically, numeric values are assigned to certain CSS selectors. Every id selector has a value of 100; class selectors have a value of 10 and every HTML selector is assigned a value of 1. You add up these values for CSS rules and the higher number wins. The following calculations are made on the previous example:

BODY H1 consists of two HTML selectors, so it is 1 + 1 = 2.
H1 consists of one HTML selector, so the result is 1.
In every instance, 2 > 1, so H1 elements (within BODY elements) are red.

Order
The order of specification is simple: When two rules have the same weight, the last rule specified wins. Applying this rule can be confusing with multiple style sheet sources, so the following order of operation is utilized:

Browser default: First, the browser's default or user-defined CSS rules are applied.
External style sheet: Style sheets defined externally are applied.
Internal style sheet (specified inside the <head> tag)
Inline style (inside an HTML element): Specific styles applied to individual HTML elements are applied.

Be aware

CSS is now a standard feature of most Web applications these days. As Web applications grow, multiple CSS sources are often used. For this reason, you need to be fully aware of how multiple CSS rules are handled by a user's system. This ensures there will be no surprises for either you or the user community.