This site hosted by Free.ProHosting.com
Google

Dan's Eclectic Library

Web Design: Cascading Style Sheets

Cascading Style Sheets (CSS for short) are a way of specifying how each element of a web page is displayed. They can also define how an element is to be spoken, for browsers used by those with impaired sight, but I haven't really dealt with that part of it, so I won't go into that aspect here.

This site uses CSS rather extensively. The colors, font sizes, margins, etc. are all specified in a separate file which is specified in the head of each HTML file. This means that I can make a change in one place that has an effect on every page within the site. How does this site look without the style sheet information? I've saved a copy of this page without the CSS information so that you can see. Granted, it isn't very pretty, but it is certainly still functional and quite readable.

Opera, the web browser that I use most often, has a button to toggle between author mode and user mode. Essentially, this turns the CSS information on and off. It's a way to look at what information a page contains, regardless of how it's presented.

So, what does cascading have to do with it? It's the way that style information is passed on from one HTML element to another. You can specify a font size for a the body of a page, and that size is inherited by other elements on the page. You cold then specify that some element, say a heading, is 200 percent larger than the base font size. Later, if you decide that the text is all a bit too small, you can change the size in one place, and the heading is still going to be 200 percent of the new size. It's a lot easier than changing something in several hundred different files.