CSS. Cascading Style Sheets. Cascading. Lovely word. Hmm. Many never stop to think about
that first word, and we are all guilty of just referring to CSS as style sheets. It is a shame that
many ignore the first part of the acronym, when it is the cascade that gives CSS developers the
most power.
Remember that a class value will override that of a base CSS rule. Well, there is also a hierarchy
to be embraced with multiple style sheets dependent on the order and method by which
they are applied to the (X)HTML. That is the cascade.
If you are applying CSS only from one external style sheet, then there is no cascade, as
nothing is applied before or after that style sheet. Things get interesting when you begin to
combine style sheets or methods of application. Let’s look at three examples.
that first word, and we are all guilty of just referring to CSS as style sheets. It is a shame that
many ignore the first part of the acronym, when it is the cascade that gives CSS developers the
most power.
Remember that a class value will override that of a base CSS rule. Well, there is also a hierarchy
to be embraced with multiple style sheets dependent on the order and method by which
they are applied to the (X)HTML. That is the cascade.
If you are applying CSS only from one external style sheet, then there is no cascade, as
nothing is applied before or after that style sheet. Things get interesting when you begin to
combine style sheets or methods of application. Let’s look at three examples.
The Cascade Through Varying Methods of Application
In Chapter 1, you learned of the various methods for applying CSS—inline, embedded, external,
and importing. It is possible to combine these methods to have an effect on the cascade.
Let’s say that you are storing all of your CSS rules in an external style sheet that is dictating
the presentation across your vast web site. For whatever reason, you need to overrule some of
the external styles for just one web page.
Time to embrace the cascade. For that one web page, you could use embedded CSS in the
<head> of the page, redefining the appropriate rules right there. When that web page is loaded,
the browser will apply the CSS it first encounters—the embedded CSS—before looking at your
external CSS to apply the remaining rules. Any identical selectors in the external style sheet will
be ignored.
Need further control? No problem. At the top of the hierarchy are inline styles—the CSS
added directly to the (X)HTML elements. Whatever styles you apply inline will overrule any
declarations in the <head> of the page or in an external style sheet.
Example
To see this in action, you can run through the following simple example:
1. Open external.css and define the default paragraph color (as in Chapter 1) with
p {color#F00;} and save the file.
2. View external.html in your browser. Assuming you are still applying CSS using
external.css, any default paragraphs should be red.
3. Now open external.html and apply the embedded style <style type="text/css">p
{color: #333;}</style> in the head of the template and save the file.
4. Reload external.html in your browser. Now any default paragraphs should be dark
gray, as the embedded CSS is overriding the linked style sheet.
5. Finally, find a default paragraph in external.html and define it with an inline style, such
as <p style="color: #CCC">, and save the template.
6. Reload external.html in your browser. Now the paragraph to which you applied the
inline style should be light gray, as the inline CSS is overriding the embedded CSS and
the linked style sheet. Any other default paragraphs should still be dark gray based on
the embedded style.
Thus the hierarchy is in place. The browser performs the inline rule first, and then looks
to perform any other rules embedded in the <head>, and finally looks to any external files to
complete its understanding of the CSS you created.
The Cascade Through Multiple External Style Sheets
Another method of exploiting the cascade uses multiple external style sheets. You already
know how to link to one or more external style sheets for various platforms (such as printers
and mobile devices), and this approach is similar, except all the external files here are specifically
for the screen:
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/one.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/two.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/three.css" />
Imagine that each of the three style sheets features a rule called #header. The declaration
for #header in each style sheet features the same properties (say height, width, and color),
although the value of each is different in some way.
In this instance, the browser will consider the last linked style sheet (three.css) as most
important and perform any rules it contains first of all. Any rules not defined in three.css will
be performed from the second style sheet (two.css). Any duplicate selectors in two.css will be
ignored, overridden by the selectors in three.css. Finally, the browser will perform any remaining
styles from one.css, assuming they are not also defined in the preceding style sheets.
So the rule for #header that was declared in three.css is performed, while any other instances
of it are ignored. Always remember that the later a rule is specified, the more weight it is given.
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/two.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/three.css" />
Imagine that each of the three style sheets features a rule called #header. The declaration
for #header in each style sheet features the same properties (say height, width, and color),
although the value of each is different in some way.
In this instance, the browser will consider the last linked style sheet (three.css) as most
important and perform any rules it contains first of all. Any rules not defined in three.css will
be performed from the second style sheet (two.css). Any duplicate selectors in two.css will be
ignored, overridden by the selectors in three.css. Finally, the browser will perform any remaining
styles from one.css, assuming they are not also defined in the preceding style sheets.
So the rule for #header that was declared in three.css is performed, while any other instances
of it are ignored. Always remember that the later a rule is specified, the more weight it is given.
The Cascade Through Imported Style Sheets
The hierarchy is also present with imported style sheets. As with the previous examples, it’s all
about the order in which the style sheets are specified. In Chapter 1, we looked at modular CSS,
where the CSS for a site is organized into relevant style sheets, such as default styles, layout
styles, navigation styles, and so on. Here’s a similar example where four modules are imported
via a master external style sheet called external.css. external.css contains the following lines:
@import url("default.css");
@import url("layout.css");
@import url("navigation.css");
@import url("forms.css");
As you’d expect from the order, forms.css is highest in the hierarchy, whereas default.css
is apparently lowest. Let’s assume that in navigation.css (second in the hierarchy) there is a
class called highlight, used to render text red. Let’s also assume that highlight appears in
default.css, but is used to render text orange. As navigation.css has more weight due to its
place in the hierarchy, the rendered text will be red.
Yet still, forms.css isn’t necessarily top of the tree. Remember that these style sheets are
being imported via a master external style sheet. In Chapter 1, you used external.css to call in
two modular sheets. Here external.css can be used again to import the modular sheets. If you
define highlight in external.css, the declared color will override either the red or the orange
specified in the imported style sheets.
Even then, the rule in external.css can still be overridden using embedded or inline CSS
in the (X)HTML template. It’s up to you when you stop the cascade, but be careful not to get
washed away by the cascade and tie yourself in knots.
**■Note If another style sheet were to be imported through one of the modular style sheets using @import,
it would automatically be lower in the hierarchy. In a nutshell, a style sheet always has less weight than the
one calling it.
No comments:
Post a Comment