|
|
| Music | Writing | Travelogues | Shakespeare Resource Center | Contact | |
Introduction | CSS Principles | Basic Concepts | Gettysburg Revisited | Other Resources
For the demonstration of what CSS can do, we are going to use the venerable text of the Gettysburg Address, which we recently used for basic formatting in the HTML primer tutorial:
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
But, in a larger sense, we cannot dedicate--we cannot consecrate--we cannot hallow--this ground. The brave men, living and dead, who struggled here have consecrated it far above our poor power to add or detract. The world will little note nor long remember what we say here, but it can never forget what they did here. It is for us, the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.
It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion; that we here highly resolve that these dead shall not have died in vain; that this nation, under God, shall have a new birth of freedom; and that government of the people, by the people, for the people shall not perish from the earth.
For this page, we have made a simple external stylesheet that covers all the HTML markup within the document. For the purposes of this lesson, we'll call it the "pumpkin" theme, which is explained by the following rules below:
| body { background-color: #CCFFCC; font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; } | This rule sets two properties: the background color of the <BODY> tag (effectively meaning the whole page) and the font that the page will use as a default. Note that no size is set. The background color is a mint green, while the body font will be sans-serif. |
| h1 { text-align: center; color: #FF6600; } | The level 1 heading <H1></H1> will be displayed as orange text and centered on the page. Note the inheritance of sans-serif from the body font setting. |
| p { font-size: .9em; } | Make all paragraph text slightly smaller than the default size. |
| a { text-decoration: none; color: #66CC66; } | Make all hyperlinks non-underlined and a green color. |
| a:hover { text-decoration: underline; color: #FF3300; font-style: italic; } | When the user mouses over a hyperlink, make it underlined, italic, and orange. |
| a:active { text-decoration: underline; color: #FF3300; font-style: italic; } | Same as above for active (i.e., clicked) hyperlinks. |
| hr { height: 1px; color: #669966; } | Make all <HR> horizontal rules 1 pixel thick and dark green. |
| .quote { font-style: italic; font-size: 12px; font-weight: bold; } | This is a generic class; any selector (<P>, <LI>, etc.) using this class will be bold, italic, and have a smaller font size than the rest of the page. |
See the stylesheet | See the page with styles
The usefulness of CSS is readily apparent when one compares the unstyled page example to the example using the stylesheet. The efficiency that stylesheets bring with them can be demonstrated by linking to a new stylesheet with the example. For instance, someone objects to the "pumpkin" theme because it hurts their eyes. With one change to the page, we can link to another stylesheet and an entirely different look:
See the new stylesheet | See the changed example
To review, a style can be either inline, embedded, or external. Stylesheets are no more than a collection of rules that govern how certain elements are supposed to be displayed by a browser. A rule consists of a selector, a property, and a value. Inline styles override embedded styles, which in turn override external styles. However, external stylesheets are generally the most useful tools in the CSS arsenal because of the flexibility they give to the designer.
In the last section, we will look over other resources on the World Wide Web that will be of further help in learning about Cascading Style Sheets.
Previous lesson | Other Resources