HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Style Sheets and the ID Attribute

Style sheets also support the ID attribute. ID specifies a unique name token identifier for an element (no two ID values in a given document can be the same) and is actually intended as a general–purpose replacement to the NAME attribute of anchor elements. However, ID is also used by CSS to provide a second way of associating style specifications with a specific element.

The mechanism is as follows. If an element is marked by an ID attribute, for example

<P ID=“nut12”> A nutty paragraph, which will be
    rendered in a nutty way ....
...</P>

then style information can be tied to this specific paragraph through a CSS instruction of the form:

#nut12 { font–size:  42pt; color: #22FF3b;
        text–decoration: underline;
}

Note how similar this is to the URL fragment–identifier notation—the hash character, followed by the name, denotes an element ID value and relates the associated style sheet instruction to a particular and unique ID–labeled element.

ID is supported by all BODY–content elements except SCRIPT and STYLE. The more general purpose of ID is to act as a general–purpose element label. In principle, a hypertext anchor can link to any ID–labeled element by using the ID value as a URL fragment identifier. For example, a paragraph labeled with the start tag <P ID=“gfx23”> could be referenced by the URL http://some.where/path/document.html#gfx23. This functionality is not supported by most current browsers, but is supported by Internet Explorer 4.

STYLE Attribute—Element–Specific Formatting

Sometimes an author wants to apply a style to just one element and does not have the luxury of modifying the style sheet. In this case, the author can use a STYLE attribute to add element–specific formatting information within the element itself. An example is:

<P STYLE=“font–family: times; font–size: 12pt”>
     paragraph text ....</P>

The value of STYLE is simply a set of applicable style sheet instructions, to be applied to the content of the element. STYLE is supported by all body–content elements except for those (BASEFONT, PARAM, SCRIPT, and STYLE) that are not associated with page content.

Cascading Style Sheets Overview

The CSS specification is long, and this brief discussion is not intended as a replacement for the full CSS specification. However, some simple examples will help to give a feel for how the system works, and are useful for understanding how the CSS mechanism relates to HTML documents. An example style sheet is shown in Figure 7.32.

Figure 7.32 Portion of a demonstration cascading style sheet (CSS). The meanings of the various lines are discussed in the text. The italicized line numbers on the left are not part of the style sheet and are there for reference purposes only.

1       BODY {
2         font–family:  Garamond, “times new roman”, Times, serif;
3         color:     black ;
4         margin–left:  10%;
5         margin–right: 10%;
6       }
7       A:link             { color: black; text–decoration: underline }
8       A:visited          { color: gray;  text–decoration: none;     }
9       H1 H2 H3           { font–family:  arial, sans–serif;         }
10      H2 H3              { margin–left:  2%      }
11      H1                 { text–align:   center  }
12 DIV.abstract{ margin–left:  15%;
13                           margin–right: 15%;
14                           font–size:    smaller }
15 .goofy  { color:        #FFFF00;
16                           font–family:  arial;
17                           background:   blue;
18                                                   }
19       @import url(<http://www.java.utoronto.ca/styles/special.css>)

Lines 1 through 6 of Figure 7.32 set the default document properties: left and right margins 10% in from the full width of the display and black text. The font–family specification gives a list of preferred fonts, from left to right. Thus this style sheet requests Garamond font, followed by Times New Roman (if Garamond is not available), Times (if Times New Roman is not available), or serifed font (if none of the preceding are available). These font family names are specified in the CSS specifications. Lines 7 and 8 specify properties of anchored text: Line 7 indicates that unvisited links should be black and with an underline, while line 8 indicates that visited links should be gray and without an underline.

Lines 9 through 11 specify properties for headings. Line 9 states that H1, H2, and H3 headings should all be in Arial font or alternatively in a sans–serif font should Arial not be available. Line 10 states that H2 and H3 headings should have only a 2% indent, so that they will hang to the left of the regular text, while line 11 states that H1 headings should be centered between the margins.

Lines 12 through 14 specify the properties for text within DIVisions of CLASS=“abstract.” Inside such a DIV, the margins should be wider (15% of the display width), while the text should be in a font smaller than that of the regular font. Lines 15 through 18 state that every element of CLASS=“goofy” should have text in the indicated color (as an RGB value—this is bright yellow), should be rendered in the arial font, and should have the indicated background color (blue). Finally, line 19 imports an external style sheet from the indicates URL, for inclusion with the current style specifications.

Figure 7.33 Simple HTML document that includes the style sheet listed in Figure 7.32. Rendering of this document is shown in Figures 7.34 and 7.35.

<HTML>
<HEAD>
<STYLE> <!––
BODY {
    font–family:  Garamond, “times new roman”, Times, serif;
    color: black ;
    margin–left: 10%;
    margin–right:10%;
}
A:link      { color:        black; text–decoration: underline }
A:visited   { color:        gray; text–decoration: none }
H1,H2,H3    { font–family:  arial,  sans–serif }
H2,H3       { margin–left:  2% }
H1          { text–align:   center }
DIV.abstract{ margin–left:  15%;
              margin–right: 15%;
              font–size:    smaller; }
.goofy      { color:        #FFFF00;
              font–family:  arial, helvetica, sans–serif;
              background:   blue;
            }
    @import url(<http://www.java.utoronto.ca/styles/special.css>)
––> </STYLE>
<TITLE>Test Of Stylesheets Document </TITLE>
</HEAD>
<BODY>
<H1>Big Stylesheets test</H1>
<DIV CLASS=“abstract”>
<P>This document tests stylesheet support. There are
   various stylesheet elements to modify presentation
   based on CLASS, or simply SPANning a group of letters.
<P>For example, if
   <A HREF=“test.html”>stylesheets are working</A>, this
   abstract should be in a slightly smaller font, with
   a slightly larger indent than the following paragraphs.
</DIV>
<H2>Level 2 Heading</H2>
<P>So, what did we get there?  Now, we will try doing some
   word specific formatting with the goofy style, as in
   <EM CLASS=“goofy”> this line of text </EM>
<P>Was that interesting, or not?
<H3>A Level 3 Heading</H3>
<P>At this point, I will bring this example to an end. It
   is nothing terribly fancy, but it should illustrate the
   main features of stylesheets. We will see
   <SPAN STYLE=“{font–family: arial; font–size:60pt;
    background: url(’testimg.gif’); ”> HELLO</SPAN>
</BODY>
</HTML>

The HTML document in Figure 7.33 helps to demonstrate the effect of this style sheet. Figure 7.34 shows this document formatted without the benefit of style sheet formatting instructions, while Figure 7.35 shows the effect of the style sheet instructions. Notice how the headings and indents in Figure 7.35 are just as specified by the style sheet.