Cascading Style Sheets - PART II
or "What do you mean... 'Cascading,' anyway?"
By Jason Conrad Cranford Teague
Recently I introduced you to the wonderful world of Cascading Style Sheets (CSS) and told you how they will revolutionize your life: They slice, they dice, they do julienne fries. However, although I showed you an example of how to define an HTML tag using CSS, I didn't actually show you how to put one into an HTML document. Let us rectify that oversight now.
Cascading Style sheets can be used by placing them in one of four basic ways:
- Within a specific tag container — affecting only the content of that particular tag, in that one instance.
- Within the head tag of an HTML document, affecting all of the related tags in that entire document.
- Within a separate text file which can then be linked to any HTML document, affecting all related tags within that document.
- Or any of the above can be combined with other style sheets to create a synergistic style sheet.
Example 1 — CSS in a single HTML tag
Although primarily intended to create changes throughout an entire document, the "styles" function of CSS can also be used to control the appearance of the content of a single HTML tag. The format for doing this is slightly different from what I showed you in the previous article, since the style codes are included within the tag to be changed, like so:
<HTML>
<BODY>
<H4 STYLE='font-size: 22pt; color: #660000;
background-color:
black;'>Title 1</H4>
<H4>Title 2</H4>
</BODY>
</HTML>
This would make this, and only this, <H4> header tag appear as follows: 22pt size and a dark red, with a black background immediately behind it. Why do it this way, instead of using the standard <FONT> commands? The advantage of using CSS is that we have control over far more text attributes than we would with the <FONT> tag. For instance, by adding "line-height: 44pt" we could double-space this text, which would be impossible with the <FONT> tag. As with the <FONT> tag, however, the specified properties will only apply to this one case — all other <H4> tags will be unaffected. Although we do not gain the benefit of the universal style changes, we can use this method to override the universally defined styles (described below) — which can be useful.
Example 2 — CSS in an HTML document
If we wanted to be able to define the style for all <H4> tags in an entire HTML document using CSS, we would define their behavior in the <HEAD> container of the document, like so:
<HTML>
<HEAD>
<STYLE>
H4 /* Defines the nature of the H4 tag */
{
font-size: 22pt;
color: #660000;
background-color: black;
line-height: 44pt;
}
</STYLE>
</HEAD>
<BODY>
<H4>Title 1</H4>
<H4>Title 2</H4>
</BODY>
</HTML>
After the <H4> tag has been defined in the <STYLE> container, which is in turn located within the <HEAD> container, this definition will apply to all <H4> tags throughout the entire document. So, if we wanted to change the appearance of all the <H4> tags, all we have to do is change the properties in one single place to affect the entire document.
Example 3 — CSS for a Web Site
If we wanted to define the appearance of the <H4> tag over multiple Web pages, or indeed throughout an entire Web site, we can place the CSS definition (like the one in example 2 without the style tags) in a separate text file, kind of like we might do for a server-side image map. By placing this definition into a file called "mystyles.css" we can then link it to an HTML page like so:
<HTML>
<HEAD>
<LINK REL=stylesheets TYPE="text/css"
HREF="mystles.css">
</HEAD>
<BODY>
<BODY>
<H4>Title 1</H4>
<H4>Title 2</H4>
</BODY>
</HTML>
NOTE: You do not have to use the ".css" extension with the CSS
definition file. We could have just called this file "mystyles" and it would
have worked just as well. However this extension can prevent confusion, so I say, "Use it!"
Example 4 — Linking Multiple Definition Files
You can, of course, place more than one definition into a single external definition file, or you can link multiple definition files into a single HTML document by adding additional link tags. The advantage? By doing this you can mix and match styles over an entire site as needed. Let's say you want to color-code the titles of your Web site by section, but want to keep all other formatting identical between sections. First we set up the definition file, which we'll call master.css, for all of the common properties between sections:
/* Master Css File */
H4
{
font-family: times;
font-size: 22pt;
font-weight: bold;
font-style: italic;
}
H5
{
font-family: helvetica;
font-size: 18pt;
font-weight: bold;
}
This defines the general appearance of the <H4> and <H5> tags throughout the site. Now we set up a separate definition file for the appearance of the headers in a particular section:
/* Section 1 CSS File */
H2, H3
{
color: # FF66FF
}
This defines the color for both header styles. Notice that we have combined both of these tags together into one list since they share the same definition. Finally we link the master definition file into all our Web pages and add the section definition files to define a pages section color:
<LINK REL=stylesheet
TYPE="text/css" HREF="master.css">
<LINK REL=stylesheet TYPE="text/css"
HREF="section1.css">
The two style sheets combine to supply each Web page with exactly the styles and colors desired for that section. And we can combine the master file with other section files without having to re-code everything!
Cascade Order
So what happens if there are conflicting definitions between style sheets? If, say, we have a definition for the <BLOCKQUOTE> tag in both an external linked definition and within the head of the document? Well this works pretty much by common sense: The last definition to be loaded is the one used. This is very useful especially if you wanted to use a
definition within a single tag (like in example 1) to override the other more global definitions.
Where to go from here
You now have the basics on constructing your own style sheets. Don't worry, they aren't that hard. In fact once you get used to using them they are much easier to use than standard old HTML. The only thing you need is a complete list of all of the different properties you can use to define your styles. You could go to the source at the World Wide Web consortium (http://www.w3.org/), but I've actually learned way more from the Web Design Group's much livelier site (http://www.htmlhelp.com/reference/css/).
There's no doubt about it, Cascading Style Sheets are the future of the Web! A new version is already being proposed (and rapidly adapted by the major browsers) that will not only allow you to control the appearance of the text, but will also allow you to move graphics or text around on the screen. Soon you will be able to create your own pull-down menus, floating text, and other dynamic elements that will follow your every whim. More on this as it develops.
Jason Conrad Cranford
Teague just
moved to England, to be with his wife Tara who is studying English Literature at the University of London. Jason wrote How To Program HTML Frames: Interface Design and JavaScript, and recently started working on the European Space Agencies' future Web site. He is a frequent contributor to Tripod's Computers/Internet.
|
