 |
Creating HTML 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 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 a lime color, all text between <i> start and end tags (HTML 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.)
One of the more powerful features of cascading style sheets is the ability to change the properties of a Web page based on its hierarchy of HTML elements (tags). By using HTML elements as the basis for a style, you can enhance the presentation of a document and maintain downward compatibility as a courtesy to viewers with browsers that don't support CSS. This means that users of browsers with CSS support will see the extra formatting that CSS permits, while the rest of your audience will see the HTML-based formatting and structure.
You can use element styles in two different ways:
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 New Style > a:hover from the context or CSS Editor menu. In the Font set of the CSS Inspector, choose a new color for the style.
To create an HTML element based style:
- In the CSS Editor, do one of the following:
- Click the New Element Style button
, or choose New Element Style from the context or CSS Editor menu. - In the CSS Editor, choose New Style from the context or CSS Editor menu and choose a style.
- Select an existing HTML element style, and choose Duplicate from the context or Edit menu.
- Select the new style in the CSS Editor, and in the Basic set
of the CSS Inspector, 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. - In the CSS Inspector, add style properties. (See Defining style properties.)
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.
You 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. Set the style properties. (See Defining style properties.)
Any new style properties you add are automatically applied to the HTML element that the style is named after wherever the tag appears in the page.
