Cascading Style Sheets/Introduction

Cascading Style Sheets (CSS) describe the visual style and presentation of a document, most commonly web sites. One purpose of CSS is to separate the presentation of a document from the structure and content (although it is possible to embed CSS within the structure as well). This separation is a W3C standard recommendation. Separation of style from structure and content increases maintainability for the author(s) of a document as well as accessibility for the audience. CSS is commonly applied to HTML, XHTML and XML documents, though it is possible, albeit rare, to apply it to other types of documents as well.

The styles described by CSS include the colors, fonts, layout, and other presentation aspects of a document. A single CSS file can describe a common style for many HTML, XHTML, and XML documents. Typically, a particular element in a XHTML file has a "cascade" of CSS style rules that can be applied to it. The highest priority style rule is applied to each element.

Why use CSS?

CSS is a powerful tool that gives web designers flexibility and modularity in the presentation layer of a web site.

CSS allows you to have every format rule defined for later use (here "format" means how things appear). So if you are writing a large website and you want a consistent appearance for every title, sub-title, how examples of code appear, how paragraphs are aligned, etc. then CSS is the way to go.

Let's say you have a 1200 page website that took you months to complete. Then you decide to change the font, the size, the background, the appearance of tables, etc. everywhere on the site. If you engineered your site appropriately with CSS, you could do this by editing one linked CSS file that has all your appearance (format) rules in one place. If you had put the styles into the HTML, you would have to adjust each and every one of your 1200 HTML pages. By using CSS, changes can be made fast and easy simply by editing a few rules and lines in the global stylesheet. Before CSS, these changes were more difficult, expensive, and very time-consuming.

Some server-side template systems can largely be used for the same purpose. Unlike CSS, however, they most often separate the structure from the content and instead of separating the presentation from the structure. Such templates make it much more difficult for users to disable or ignore styling or use alternate structures for the same content.