About Cascading Style Sheets (CSS)
If you can see this paragraph, then you are using one of the older browsers that does not fully support CSS. Although you can see and read all the content, much of the presentation "style" is missing.
Without going into all the ins and outs of CSS, perhaps I'll just quote the World Wide Web Consortium (a group who creates Web standards). If you'd like more information go to this information page: About the World Wide Web Consortium (W3C) .
CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
What I have found is that I can produce nice looking Web pages without having to resort to using tables or nested tables. In addition, I have been able to greatly reduce the number of images I use for presentation purposes.
One of the disadvantages is that I can no longer design for some of the older browsers and still take advantage of all the CSS features I want to use. This does not mean those of you with older browsers will not get the same content, it just means that the formatting of the page will be different for you. If you are interested in upgrading your browser, see the browser upgrade campaign page at the Web Standards Project (WaSP)
Some CSS Examples
For those of you who are not familiar with CSS, the examples shown here are just to give you some idea of the formatting capabilities available using CSS.
Example 1 - Link effects without JavaScript
This is one of my favorites. It really simplifies changing how links appear, there's quite a bit of flexibility, and it's done without JavaScript. You get a different effect when you mouse over each of the links.
Example 2 - Float
This example shows the capability to float content on the page to produce some interesting effects. If you are viewing this page in an older browser, the effect will probably be similar to a newer browser, but the colored box may not fill all the way to the borders.
This is enclosed in a colored box and should appear to the right of the paragraphs. It's a bit like those boxes of information you see in some books.
This is one of the paragraphs which should have a colored box floating to the right. The paragraphs in this example will wrap around the colored box until they get past it.
This is a second paragraph. Once the paragraph has extended past the content of the colored box, it continues in a normal paragraph format. The text starts to extend to the full width allocated after it gets past the floating box. This is just a simple example. There is much more you can do with this, but you can discover that on your own if you are interested. The W3C CSS1 Test Suite has plenty of examples. Take a look at the Rants & Raves pages on this site to see some more complex use of the float, but again, if you have an older browser, they will not have the presentation style available.
Example 3 - Boxes
This example shows another box that is placed, more or less, in the middle of the text area. It uses a dashed line instead of a solid line.
The decorated box expands downward as the amount of text increases. Its width is a percentage so even if you resize your browser window it will stay in proportion. The text alignment is set to justify.
Helpful CSS Links
Here is a list of some sites I found helpful when I first started looking at CSS. They won't make you an expert, but they gave me a good idea of the possibilities that exist. You'll find more helpful links on these sites..