Creating styles in a style sheet

There are three different types of styles you can define in a style sheet:

• HTML element styles are "hard-wired" to specific HTML tags. This means the style properties automatically apply to a tag, and any content it might enclose, wherever the tag appears in a Web page. This style type lets you display pages in CSS-enabled browsers exactly as you want them to appear. Simultaneously, browsers with no CSS-support, or incomplete CSS-support, will have the benefit of the HTML-based formatting that is inherent in the tag you specify in the style name. For example, if an HTML element style is named for the <h3> tag, any style properties you add to the style will be applied to any text that uses the Header 3 paragraph format in the page when viewed in CSS-enabled browsers. Browsers without CSS-support will display the text using the default Header 3 text properties.
• Class styles apply to selected text or objects in a document, similar to the way word processor styles function. Any number of elements inside the BODY section of a page can host a class style. If you modify the class style's properties, the changes affect all text and objects to which the style was applied. Class styles are more flexible than HTML element styles because a class style can be applied to multiple types of content and only to items you select. For example, you can apply a class style to some of the headings that use the Header 4 paragraph format in a page to distinguish them from other Header 4 headings in the page.
• ID styles define unique style properties for one element on a page. This style type is rarely used and only used if the style properties of an item must be distinct from all other items on the page. Consider using a class style instead since it can also be applied to a single item but is more flexible and can be easily applied to content in a page without using the Source Editor.

Two major style categories are used with cascading style sheets:

• Simple Styles match elements based on the element type and/or attributes, not the element's position in the document structure. H1 (all level 1 headers) and H1.headline (all level 1 headers with the CLASS attribute.headline) are examples of simple styles.
• Contextual Styles match elements based on their position in the document structure. A contextual style consists of several simple styles. H1.headline B (all level 1 headers with the CLASS attribute .headline and bold typeface) is an example of a contextual style consisting of two simple selectors, H1.headline and B.

Related Subtopics:

Creating HTML element styles
Creating class styles
Creating ID styles
Removing styles