Cascading Style Sheets/Introduction

From Wikibooks, open books for an open world
Jump to: navigation, search

CSS, or cascading style sheets, are used to describe the visual style and presentation of a document, most commonly web sites. One of the purposes 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), and is a W3C 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.

CSS is one way of describing the "style" -- the colors, fonts, layout, and other "presentation" aspects of a document. A single CSS file can describe a common "style" to be applied to many HTML, XHTML, and XML documents (which describe the content and structure of the elements of each document). 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?[edit]

Why would I want to use CSS rather than something else?

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, (I could go on, CSS covers a wide range of presentation options) then CSS is the way to go.

Let's say you have a 1200 page website that took you months to complete. Your current boss gets a promotion and another person fills his place. Your new boss says to change the font, the size, the background, the appearance of tables, etc. everywhere on your 1200-page site to comply with some new corporate policy. 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. Or you could do it the hard way, and hammer the appearance changes on 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 was used, 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 not the presentation from the structure, making it much more difficult for users who wish to disable or ignore styling to do so.