Platinum Edition Using HTML 4, XML, and Java 1.2:Style Sheets

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

The code in the example produces the stylized and overlapping set of links you see in Figure 9.4.


	Using inline styles is fine for changes to small sections of your document. However, you should consider using a linked style sheet or the <STYLE> tag if your styles are to be global.

FIGURE 9.4 The <SPAN> tags enable you to assign style characteristics to content that is not neatly contained between a set of tags.

Tips for Style Sheet Users

Even though style sheets are relatively new, Web authors are already coming up with some good general rules for implementing them. The next few sections share some of these helpful hints.

Harnessing Inheritance

Inheritance refers to the fact that HTML documents are essentially set up as hierarchies, and styles applied at one level of the hierarchy necessarily apply to all subordinate levels as well. Therefore, if you assign style information inside of a <UL> tag, the information also applies to all the items in the unordered list because the <LI> tags are subordinate to the <UL> tag.

If you’re not using embedded style information, you can make broader use of inheritance by setting up as much common style information in the <BODY> tag as you can. Because every tag between <BODY> and </BODY> is subordinate to the <BODY> tag, these tags will inherit the style information you specify in the <BODY> tag, and you should be spared from having to repeat it throughout the rest of the document.

Additionally, under CSS2, all presentation properties can take the keyword inherit, which forces an element to inherit the same value of the property as its parent element.

Grouping Style Information

If you want to assign the same style characteristics to a number of tags, you can do so in just one line rather than using a separate line for each tag. If you want all three kinds of links—unvisited, visited, and active—to be rendered in the same style, for example, you can list them all individually:

A:link {font-size: 10 pt; color: 00FF00; font-decoration: underline}
A:visited {font-size: 10 pt; color: 00FF00; font-decoration: underline}
A:active {font-size: 10 pt; color: 00FF00; font-decoration: underline}

or you can define them all at once:

A:link A:visited A:active {font-size: 10 pt; color: 00FF00;
font-decoration: underline}

Either set of code will make all hypertext links appear in 10-point type that is green and underlined.

NOTE: You may have noticed in CSS1 that the :link, :vlink, and :active link classes were all mutually exclusive. In CSS2, all three classes can be used together.

You can also group style information applied to only one tag. For example, if you redefined your level 2 headings as

H2 {font-size: 16 pt; line-height: 18 pt; font-family: “Helvetica”;
font-weight: bold}

you can express the same thing as

H2 {font: 16pt/18pt “Helvetica” bold}

and save yourself a bit of typing.

Creating Tag Classes

The proposed style sheet specifications enable you to subdivide a tag into named classes and to specify different style information for each class. If you want three colors of unvisited links, for example, you can set them up as

A:link.red {color: red}
A:link.yellow {color: yellow}
A:link.fuschia {color: fuschia}

The period and color name that follow each A:link sets up a class of the A:link tag. The class name is whatever follows the period. You use the class names in the <A> tag to specify which type of unvisited link you want to create, as follows:

Here’s a <A CLASS=“red” HREF=“red.html”>red</A> link!
And a <A CLASS=“yellow” HREF=“yellow.html”>yellow</A> one …
And a <A CLASS=“fuschia” HREF=“fuschia.html”>fuschia</A> one!


	If you use multiple style sheet approaches, make sure you define the same set of classes in all of them so that the same set of class names is available to the browser in each case.

Using the ID Attribute

You can also set up your own style names if setting up a named class of an HTML tag doesn’t suit your needs. For example, you can say:

<STYLE TYPE=“text/css”>
<!--
…
#style1{ font-size: 16 pt; text-decoration: underline }
#style2{ font-size: 20 pt; text-decoration: blink}
…
-->
</STYLE>

and then reference these styles using an ID attribute in a tag that can take the STYLE attribute; for example,

<BODY ID=“style1” …>
…
<P ID=“style2”>
Here is a paragraph done in style2 …
</P>
…
</BODY>

In this code excerpt, all the body text will be rendered in underlined, 16-point type as defined by the style1 identifier, and text in the paragraph that starts “Here is a paragraph done in style2 …” will be 20 points high and blinking, as specified by the style2 identifier.

NOTE: Named identifiers have to start with the pound sign (#) when you define them in the style information section of your document. When you reference an identifier with the ID attribute, the pound sign isn’t necessary.

Style Sheet Software Tools

Even though Web style sheets are still fairly new, a number of document authoring software packages are rising to the occasion and providing support for including style information in your documents. Microsoft showed leadership in implementing the Cascading Style Sheet specification in Internet Explorer 3, so it should be no surprise that its Web development tool, FrontPage, is leading the way in providing style sheet support for document authors.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.