Creating HTML element styles


    One of the more powerful features of cascading style sheets 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.

    You can use element styles in two different ways:

    • 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> <i> tags and assign the style a lime color, all text between <i> 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 <i> start and end tags will use the style.)

    TipTo 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 New Element Style button's menu or the CSS Editor menu.

To create an HTML element based style:

  1. In the CSS Editor, do one of the following:
    • Click the New Element Style button New Element Style button .
    • In the CSS Editor, choose a tag from the New Element Style button's menu.

    TipTo add a HTML tag to both menus, choose Edit Style Examples from the New Element Style button's menu. (See Using the CSS Editor.)

    • Select an existing HTML element style in the CSS Editor, and choose Edit > Duplicate.
  2. Select the new style in the CSS Editor, and select the Selector and Properties tab Selector and Properties tab . If you didn't choose a tag in step one, type an HTML element (tag) name in the Name text box. If you want to apply the same properties to multiple elements, separate each element name with a comma in the Name text box.
  3. Element styles use HTML start tags without the less than (<) and greater than (>) characters--for example, h2 for second-level headers, p for paragraphs, td for table cells, and the letter a for hypertext links. For more information on naming HTML element styles to format tables and table content, see Formatting tables and table content with cascading style sheets.

    TipYou can set the shared properties of all text in a page by creating an HTML element style that is named after the tags <body>, <div>, and <td> (for table cells). Add one new HTML element style to the CSS Editor, and in the Basic set of the CSS Inspector, enter the name as "td, body, div" without the quotation marks.

  4. In the CSS Editor, add style properties to the selected style. (See Defining style properties.)
  5. Any properties you add are automatically applied to the HTML element that the style is named after wherever the tag appears in the page.

    Illustration of CSS Editor with these callouts: A. Element style name B. Style properties C. TD style is automatically applied to text in table cells in the page
    CSS Editor A. Element style name B. Style properties C. TD style is automatically applied to text in table cells in the page