Cascading Style Sheets Example

There are three parts to a CSS statement

1. selector
2. property
3. value

Each statement is written like the following:

selector {property: value}

There are three kinds of selectors:

1. elements
2. classes
3. ids

Elements refer to basic HTML tags: a, img, p, body, div, etc.

Classes are defined selectors. A class is defined by a . (period) and a name:

• .right
• .left
• p.readmore

Classes are used to further define already existing elements.

ID are defined selectors as well. Typically they are used to define DIVs. An ID should be used when the element is going to appear or be used only once.

• .right
• .left
• p.readmore

The screenshot below shows a small example from a cascading style sheet. Each part is labled accordingly.

If you want to examine a full length css document, I would suggest the following:

• Go to Open Source Web Design
• Click Search Designs
• Select XHTML 1.0 Srtict under validation
• Select Yes under CSS
• Click Search
• A list of designs will show on the screen. You can view each design and download it.
• Download a few designs. It doesn’t matter what it looks like if all you’re after is understanding what a style sheet looks like.
• The downloaded designs will contain a .css file.
• Open the file in a text editor and learn away!
• Other designs can be found at Open Web Design following similar steps as above.

[tags]css, cascading+style+sheets, webdesign, development[/tags]