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.
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.
Additional CSS resources from TechRepublic
- Creating
multicolumn lists - Creating
indented navigation lists - Styling
text with pseudo-elements - Debunking
the myth of style defaults - Creating
a double-gradation background with CSS - Alternate
approaches to styling a You Are Here button - Try
CSS media types to build printer-friendly pages - Ditch
graphics-heavy pages: Create flexible CSS2 border effects - Make
better Web pages by understanding the CSS box model
Miss a column?
Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.
Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.
