Scriptkitty.ws

 Using Cascading Style Sheets

Cascading Style Sheets (CSS) are really cool to set up and use for controlling the appearance of a web page. Things are made easier if your using the HTML editor Homesite 4 from Allaire to create your style sheets.

Style sheets come in 3 flavors -

A poem using CSS for postioning

The attached page is a poem about the near extinction of wolves using an embedded style sheet that positions, exactly, the graphic of the howling wolf, the poem title which is also a graphic file, and the poem text. The text has a set margin distance that will always keep it to the right of the wolf picture. The wolf graphic is 410 pixels wide so I set the text to be positioned 418 pixels from the left margin. In the past if you wanted this degree of control you would have had to use a table, now you can do it with style sheet information.

Heading Style

Some of the style information that I have controlled in this document using CSS are the headings of which there are three - H1, H2, H3. The headings are set to use a handwriting font with settings for border width, color and style. The colors for the hyperlinks within a document are set for link, visited, active and hover. You will notice that links are orange, active links are whit, visited links turn purple and when the mouse hovers over the link it turns gold. I love it!

If your a control freak like I am, then you will be really excited when you realize the power you have over your text when you set the "declaration" which is the property and value (for example, where color is the property and value is the actual color such as red) for a specific "selector" which is the HTML tag, such as p for paragraph. This paragraph has p set to x-small using a style sheet class called .smaller. This will render the text for the noted paragraph as relatively smaller than the base font. Looking at my code you will see that instead of <p> for this paragraph I am using <p class="smaller">.

This paragraph is using the selector <p> with a class named .larger and so the text is rendered as a absolute size of large.

There are problems....

The problem with all this cool Cascading Style Sheet stuff is that only newer browsers will understand the style sheet code, so someone using an older browser will not see your text formatting the way you want them to see it. So, design your pages that use CSS so that they degrade gracefully!

Back to the Web Design Project Page