Gordon's Software Training

The Structure of a Rule (The Anatomy of a Style)*

Diagram of a CSS rule

Examples of rules (styles)

P {color: gray}
Body {color: black}
H1 {font: 18 pt Helvetica; color: purple; background: white;}
H1, H4 {color: red; background: white;}
H1, H2, H3, H4, H5, H6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}
BODY { margin: 5% 10% 5% 10%; background: #FFCE9C; color: navy; font-size: large;}
Note that in this last rule the margins are in this order: top | right | bottom | left; the first 5%. therefore, applies a 5% margin for the top of the body, the first 10% for the right hand side of the body, etc.

*The terms in parentheses are what Elizabeth Castro, the author of our textbook HTML for the World Wide Web, uses in discussing styles. The other terms not in parentheses are used by the WC3 and in the book Cascading Style Sheets, by Eric A. Meyer (published by O'Reilly). The above diagram is adapted from page 22 of Meyer's book.

Typical global or embedded stylesheet with HTML document

<HTML>
<HEAD>
<TITLE>Title goes here</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font-size: large; font-family: Arial Black; font-weight: normal; text-align: left; margin-left: 1in; margin-right: 1in; color: Maroon; background: Aqua }
H1, H2, H3, H4, H5 {font-family: Helvetica, sans-serif; color: yellow; background: blue}
P {text-indent: 5%}
UL {list-style-type: circle}

-->
</STYLE>
</HEAD>
<BODY>
Your entire document goes here. Use headings and an undered list to see how the styles will apply.

</BODY>
</HTML>

Typical Linked or External Stylesheet

Several HTML pages could be linked to a single style sheet saved as a text file with the .css suffix. Let's give this file the name styles3.css and save it in the same folder where the HTML files are that link to it. Here is a example of such a style sheet. This linked style sheet has the same styles as the global style sheet above, but it does not contain any of the HTML tags.

BODY {font-size: large; font-family: Arial Black; font-weight: normal; text-align: left; margin-left: 1in; margin-right: 1in; color: Maroon; background: Aqua}
H1, H2, H3, H4, H5 {font-family: Helvetica, sans-serif; color: yellow; background: blue}
P {text-indent: 5%}
UL {list-style-type: circle}

To apply a .css stylesheet (styles3.css in the following example) to an HTML page, add a <link> tag to the HEADER:

My examples of internal or embedded style sheets

Course Guide
Style Sheet Example
Basic HTML Tags with Styles (See same document without styles)

My examples of external or linked style sheet

Exercises
Dryer-vent safety site. Screen save of the CSS rules.
Basic HTML Tags (Linked Style Sheet)
Examples of Screen saves of Style Sheets

Examples of Cascading Style Sheets created by others

Web Starndards Project advocates upgrading to browsers that can handle CSS. View this site's external style sheet
ChrisLord.com. The frame in this site hides the style sheet link -- so try to figure out how you view the author's style sheet in spite of the frame.