Cascading Style Sheets

This is a small HTML page that will be used to show the effects of Cascading Style Sheets. There are a number of type styles used on this page as examples of what can be done with Cascading Style Sheets. Typically Cascading Style Sheets are referred to as CSS, or sometimes as CSS-P (which is Cascading Style Sheets - Positioning, a subset of CSS devoted to positioning items on a page).

Terms

When discussing CSS, a few terms need to be defined:

Selector

The HTML attribute to be modified

Declaration

The property to be modified and it's new value

Rule

The combination of a selector and declaration

Property

A specific aspect or detail of a tag - such as font color or table border size

Value

The new setting to be applied - such as black or 24 points

Format

The format to create a style is as follows: (This one sets the font color to black for the body of the document)

Body{Color:Black}

To add multiple declarations, simply separate them with a semi-colon. (This one sets the font color to black and the background color to white for the body of the document.)

Body {Color:Black; Background:White}

Placement

Styles can be defined in several different locations, each with a different level of importance if they conflict with each other. The general rule of importance is the style defined closest to the actual element has priority over any other defined styles. The placement of style rules can be in an external file, the heading of the document, or as part of the element tag. Elements that can contain other elements, such as a table, can have styles declared for each interior tag as well. Thus a table can set a style, and individual row can override the table settings, and an individual cell can override a row setting.

Complex Selectors

It is possible to apply the same style to multiple HTML elements by listing the multiple selectors separated by a comma. As an example, to set headings level 1, 2 and 3 to be displayed with blue text and italic, the style would be as follows.

H1, H2, H3 {color:0000FF ; font-style:italic}

It is also possible to choose to apply a style only when one HTML element is inside of another. For example, to set the color of all bold elements that are located inside of tables to bold serif 14 point text, the code would be as follows. Note that both lines create the same effect, the second line is just a more compact method of identifying the same information.

TD B {font-weignt:bold ; font-family:serif ; font-size:14pt}
TD B (font: bold 14pt serif}