The STYLE Attribute

The STYLE attribute is different from the other attributes described in this chapter. Whereas CLASS and ID attribute values can be used in selectors, the STYLE attribute is actually a replacement for the entire selector mechanism. Instead of having a value that can be referred to in a selector (which is what ID and CLASS have), the value of the STYLE attribute is actually one or more CSS declarations.

Normally, using CSS, a designer will put all style rules into a style sheet that goes into the STYLE element at the top of the document (or is linked externally as described in Chapter 14, "External style sheets"). However, using the STYLE attribute, you can bypass the style sheet and put declarations directly into the start tags of your document.

Figure 4.6 shows one example of this.

Figure 4.6. An HTML element with style rules embedded in the start tag.

Figure 4.6 attaches a declaration to a single element and results in underlining the content of the element. Recall from the example in the previous section that the ID attribute accomplishes the same thing: setting style on a single element. But whereas the ID attribute involves an indirection, the STYLE attribute bypasses the style sheet and puts the declaration directly into the start tag of the element it applies to. Properties set using the STYLE attribute are treated exactly in the same manner as if the property had been set in a style sheet using an ID selector.

You could conceivably use the STYLE attribute to apply styles to just about anything and everything. For example, you could use the STYLE attribute this way (shown in bold):

 <HTML>   <TITLE>Hamlet, excerpt from act II</TITLE>   <BODY STYLE="color: black; background: white">     <P STYLE="font-weight: bold">       Polonius: Do you know me, my lord?     <P STYLE="font-weight: normal">       Hamlet: Excellent well,       you are a fishmonger.     <P STYLE="font-weight: bold">       Polonius: Not I, my lord.     <P STYLE="font-weight: normal">       Hamlet: Then I would you       were so honest a man.   </BODY> </HTML>

This use of the STYLE attribute is legal, but there are two reasons why you should not, in general, use the STYLE attribute. First, it's the long way to set styles. Because the declarations in the STYLE attribute apply only to the element where they are specified, there is no way to reuse your declarations, so your documents become longer. Also, if you later want to change the presentation of your document, you have to make changes in more places. Second, by interleaving style and content, you miss out on an important advantage of style sheets: the separation of content and presentation. By putting all of your style settings into a style sheet, you can make your style sheets apply to more than one document (see Chapter 14 for how the LINK element can be used for this).

The rather messy use of the STYLE attribute can be rewritten into the following:

 <HTML>   <TITLE>Hamlet, excerpt from act II</TITLE>   <STYLE TYPE="text/css"gt;     BODY { color: black; background: white }     .POLONIUS { font-weight: bold }     .HAMLET { font-weight: normal }   </STYLE>   <BODY>     <P CLASS=POLONIUS>       Polonius: Do you know me, my lord?     <P CLASS=HAMLET>       Hamlet: Excellent well,       you are a fishmonger.     <P CLASS=POLONIUS>       Polonius: Not I, my lord.     <P CLASS=HAMLET>       Hamlet: Then I would you       were so honest a man.   </BODY> </HTML>

So, use the STYLE element to apply styles to all of a type of element. Save the STYLE attribute for occasional stylistic changes you want to make to an element.