11.1 Assigning Style Sheet Rules to an Element Globally

NN 4, IE 3

11.1.1 Problem

You want every instance of a given element in a document to be governed by the same style sheet rule.

11.1.2 Solution

Define a style sheet rule in the head portion of your document, assigning the rule to an HTML element name:

<style type="text/css">
<!--
tagName {styleProperty1:value1; styleProperty2:value2; ...}
-->
</style>

For the tagName, specify the name of the tag without its angle brackets. The following example sets the font size and line height of every p element in a document to 14 points and 110% of normal, respectively:

<style type="text/css">
<!--
p {font-size:14pt; line-height:110%}
-->
</style>

11.1.3 Discussion

Style property names come from the long list of Cascading Style Sheet properties available to DHTML-equipped browsers. The <style> tag is not recognized by browsers prior to Navigator 4 or Internet Explorer 3, so the HTML comment pair just inside the tags hides the style sheet rule definition(s) from older browsers (which would otherwise render the rules as body text, even though the style sheets are defined in the head portion of the document). If you don't worry about ancient browsers, you can omit the comment symbols.

Because global style definitions apply to every instance of a particular element in a document, you can essentially define custom appearances for a browser's default behavior. For example, if you don't like the way browsers render text surrounded by an <em> tag (signifying emphasis) as italic text, you could redefine this behavior by assigning a rule to all em elements that display the text in normal style but with a red color:

em {font-style:normal; color:red}

No change is needed in the actual <em> tags in the document. Browsers not capable of CSS display the element's content with their default italic style.

11.1.4 See Also

Recipe 11.2 and Recipe 11.3 to narrow a style's specificity to fewer than every element with a particular tag name.