One of the more powerful features of cascading stylesheets is the ability to change the properties of a web page based on its HTML elements (tags). By using element styles, you can enhance the presentation of a document and maintain downward compatibility as a courtesy to viewers with browsers that don’t support CSS; browsers that support CSS display the enhanced formatting that CSS permits, while the browsers that don’t support CSS display HTML-based formatting and structure.

CSS Editor

A.

Element style name

B.

Style properties

C.

TD style is automatically applied to text in table cells in the page

You can use two different types of element styles:

Simple element styles

Reformat all instances of a particular element within your page. For example, if you create a style with the text property 36 point and name it with the <h1>tag, all text that uses that tag (the Header 1 paragraph format) will display with size 36 point.

Contextual element styles

Reformat all instances of a particular element nested within another element. For example, if you create a style named with the <h1> <em> tags and assign the style a lime color, all text between <em> start and end tags (italic style) that are also within <h1> start and end tags will display in the lime color. (The proper style name for this example is “h1 i” without the quotation marks. If a comma is inserted in the style name, as in “h1,i” then any text between <h1> or <em> start and end tags will use the style.)

To create hypertext links that change color when the mouse pointer hovers over the link, use a contextual element style named after the <a> “link” tag. In the CSS Editor, choose a:hover from the Create A Style That Applies to Markup Elements button’s menu. Contextual element styles like a:hover and a:active are pseudo classes.