by A W Drake

Created on: February 18, 2010

A cascading style sheet is a document that is linked to a HTML file and contains the formatting elements for a web page. Basically, the Cascading style sheet (CSS, or style sheet) creates the design of a web page whilst the HTML document takes care of the content of the page.

 Before styles sheets were introduced by the World Wide Web Consortium (W3C) in 1996, HTML coders needed to write long HTML documents, laboriously retyping the same tags time and again.

Style sheets changed all this because now one style rule within a style sheet can control how all HTML tags it relates to appear on a web page. If one style rule is modified in a style sheet then all the HTML tags it corresponds to will also be modified.

CSS has made web page creation a more efficient and manageable process, helping to keep design more consistent, allowing people with disabilities better access to the web and eliminating a lot of browser specific 'work arounds'.

+HOW STYLE SHEETS WORK+

 Formatting a web page with style sheets requires two steps. Firstly the  style rules within the style sheet need to be defined, then these style rules need to be applied to the text and other elements within the HTML document.

+CREATING STYLE RULES+

 A style rule in a style sheet is made up of two parts, a  selector and a declaration. In the following example the 'p' is the selector and everything within the curly brackets is the declaration:

p {font-family: arial; font-weight: bold; color: #f9f9e8}

 The declaration must have at least one  property with a given value:

{property: value}

In a working example this will look like this:

{font-family: arial}

In the top most example there are three values in the declaration, so as you can see, more than one value can be added to a declaration when you want them to apply to just one selector.

If the above style rule was part of a style sheet and linked to a HTML document then its formatting would apply to all paragraphs within the web page. However, in CSS it is possible to create style rules that can be applied more selectively.

+ THE CLASS SELECTOR+

 Instead of applying formatting to all instances of a particular HTML element, the  class selector enables  multiple style rules for that HTML element. To keep with the paragraph theme from above, here are three examples of paragraph selectors:

p.red {color: red}

p.green {color:  green}

p.blue {color: blue}

Any one of these can now be added to a paragraph's opening HTML tag to

• 1
• 2
• Next Page >>