Cascading Style Sheets

This page offers some introductory basics on Cascading Style Sheets (CSS)

Why Use CSS

Lets say I code up several pages of my new website and use a nice big chunky font size for the site header at the top of each page. Several days later I'm testing my site and conclude that the font is way too big and overwhelming and I also want to try a different font. If I have used a CSS style sheet to control these parameters, then I can change the style sheet entires and have all my pages change. Without CSS you have to add the necessary HTML control tags to each paragraph, to each table cell, in far too many places. Your HTML file size gets bigger with all that HTML code and it is a major chore to overhaul the site. Far too much work to endure on a large site.

Styles In Microsoft Word

Some of you are familiar with Microsoft Word (a word processing application). With Word, you can use the default styles for the various heading levels, or you can change the built in styles. You can also create your own styles and apply them throughout your document. Some of the parameters you can set (for each style) are font type, size, color and indentation. Once your document has been typed up, you can re-format your styles, using the style editor, with the results effective throughout the document.

CSS Styles

You can do much the same thing with CSS in that you can declare the styles that you wish to use in a page and have those styles effective throughout the page. You can also create a separate CSS page that all your pages refer to. Change the coding in the CSS control page and the styling changes on all your pages.

Cascading Priority

Lets say that your HTML code has specified a particular font size for a paragraph or segment of text. In that case CCS cannot control the font size for that segment of text. Remove the font size control from the HTML and the CCS styling, at the top of the page, can specify the font size for that style, where ever it is used on the page. If the font size, for that style, is specified at the top of the page, then the linked to page cannot control the font size for that style. In order for the linked to CSS style sheet to control your web site, you must remove the style coding at all the higher priority levels.

Tables

There is much more to CSS than controlling font size, color, etc. For example, CSS can do much more efficiently what we often do with tables, resulting in smaller file sizes that load faster.

Browser Compatibility

The older browsers don't support CSS, especially the most recent editions of CSS. If an older browser does not support Javascript, then your navigation system may fail entirely. If a visitor's browser does not support CSS, then it ends up using your default HTML formatting. Worst case scenarios are not nearly as catastrophic as they can be with Javascript, flash, etc.

Standard HTML text sizes are rendered differently on a MAC vs a PC. This is one of the many areas of browser incompatibility that CSS sets out to solve.

Start Out Simple

All webmasters who take their role seriously should be learning about CSS as it is taking on a growing value and strength in website design. There is a lot to learn about CSS and yet you can start out real simple and experimentally nibble your way into it a little bit at a time.

Church Website Example

Webmaster John Gales comments that the Green Bay Seventh-day Adventist Church website makes extensive use of CSS.

Websites to visit, to dig deeper into this topic

	Dave Raggett's Adding a touch of style
	Boogie Jack's Introduction to Cascading Style Sheets
	Listamatic -- Dozens of ways to present an HTML list (e.g. for navigation) using CSS. Some are truly amazing.
	CSS (Style Sheets) by Website Tips