Notes on Cascading Style Sheets (CSS)

Click on small photo of Richard Gordon to view larger photo.
Home | Class resources | Course Guide | Gordon Websites | Domain name | Forms | Frames | Graphics | HTML | Lesson Plan | Miscellaneous | Photos | Promotion | Webmaster's Resources |
Servers - Selecting
| Student sites | Tables | Textbook Exercise Sites | Uploading

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

Diagram of a CSS rule

 

Examples of rules (styles)

  1. P {color: gray}
  2. Body {color: black}
  3. H1 {font: 18 pt Helvetica; color: purple; background: white;}
  4. H1, H4 {color: red; background: white;}
  5. H1, H2, H3, H4, H5, H6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}
  6. 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:

<HEAD>
<LINK REL="stylesheet" href="styles3.css" type="text/css">
</HEAD>

My examples of internal or embedded style sheets

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

My examples of external or linked style sheet

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

Examples of Cascading Style Sheets created by others

  1. Web Starndards Project advocates upgrading to browsers that can handle CSS. View this site's external style sheet
  2. 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.
  3. OffToWork. Use View/Source to get to the style sheet ie.css.

Home | Class resources | Course Guide | Gordon Websites | Domain name | Forms | Frames | Graphics | HTML | Lesson Plan | Miscellaneous | Photos | Promotion | Webmaster's Resources |
Servers - Selecting
| Student sites | Tables | Textbook Exercise Sites | Uploading
Graphic credit: grant credit here
Last updated 2/16/01/
©Copyright by Richard Edward Gordon. All rights reserved.
For information contact Webmaster richard@gordonrichard.com