CASCADE refers to the precedence of style sheet instructions. Cascading comes into play when style sheets conflict. As has been discussed already, style sheet rules can be placed inline, embedded or external and one must also consider html coding instructions done in the usual manner. One can think of conflicting rules as cascading with the closest rule coming out on top and winning.To go to an extreme, let us say one defines <H3> in an externally referenced style sheet as italic green Courier as we have done in our example. Then, in an embedded style rule we say it is blue and in an inline style we say it is Arial. According to the cascade rule, the resulting <H3> would be italic blue Arial. Any without the inline rule for Arial would be blue but still in Courier. To simplify the example of this, I'll just use embedded and inline, adding an inline style to our previous example.
<HTML>
<HEAD>
<TITLE>CSS Example 1</TITLE>
<STYLE type="text/css">
<!--
h3 {
font-family: Courier;
font-style: italic;
color: green
}
-->
</STYLE>
</HEAD>
<BODY>
<H3>one heading in Courier italic green</H3>
<H3 style="font-family: Arial">now appears as Arial still italic green</H3>
<H3>and a third heading in Courier italic green</H3>
</BODY>
</HTML>
Copy paste the code above and view the results or check out Example 2. Again, the best way to really understand how cascading functions is to play around with it. Change the embedded rules and the inline rules and check the results and then change them some more <grin>.
Sometimes, for example, we may want something like a heading to appear two different ways. It can be done as above but let's say a document has eight H3 headings, four of which we want to be blue Courier and four of which we want to have red Arial italic. This is where contextual style rules can come into play.
<HTML>
<HEAD>
<TITLE>CSS Example 1</TITLE>
<STYLE type="text/css">
<!--
h3 {
font-family: Courier;
color: blue
}
i h3 {
font-family: Arial;
color: red
}
-->
</STYLE>
</HEAD>
<BODY>
<H3>one heading in Courier blue</H3>
<i><H3>now appears as Arial red italic</H3></i>
<H3>and a third heading in Courier blue</H3>
</BODY>
</HTML>
In other words, using a style sheet one can say to the browser, show all <H3> as blue Courier EXCEPT when it is in the context of (inside of) <I> </I>, then show it as red Arial. This opens up a lot of possibilities with your style sheet. This can also be done using classes which we will get to in a bit.
A quick side trip into how to set up an external style sheet and we'll close this lesson. To create an external style sheet, write up the style sheet rule portion which, from our example, would be the code lines below:
h3 {
font-family: Courier;
color: blue
}
i h3 {
font-family: Arial;
color: red
}
Save it as sample.css in the directory (folder) you are working in. On the page(s) you want to refer to it from, you put:
<HTML>
<HEAD>
<TITLE>CSS Example 1</TITLE>
<STYLE type="text/css">
<!--
<LINK rel="stylesheet" type=text/css" href="sample.css" title="style1">
-->
</HEAD> </BODY>
</HTML>
If you work at all like I do, you might want to develop your style sheet as an embedded style and then, when you have the page looking like you want it, copy/paste it into it's own file, save it as a .css file and replace the styles in the page with the <LINK>. You can then build additonal pages using the <LINK>.
On to more...
| Intro | |
| Getting Started | Context/Cascade |
| Properties & Values | Classes |
| Resources | |
| © MaMaT | htmlhelp.rootsweb.com | Last edited on 28 Nov 1999 |