Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colours, spacing) to Web documents.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (that is, the look and formatting)

A CSS sheet is attached to an HTML document, to influence its layout when accessed via a browser.

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colours, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML.

CSS allows authors to move much of that information to a separate stylesheet resulting in considerably simpler HTML markup.

CSS supports cascading, i.e. a single document may use two or more stylesheets that are then applied according to specified priorities.

Cascading Style Sheets

Style sheets are made up of one or more rules that look something like this...

What Do StyleSheets Look Like?

H1 {

 font-family: arial,helvetica;

 font-size: 12pt;

 color: green

}

Each rule begins with a selector, which is H1 in the example above. A selector is often one or more HTML tags, and the declarations inside the rule describe how those elements should appear. The above CSS codes will force all H1 tags on the page to use a 12 pt Arial or Helvetica font in green text.

You can also use classes as selectors, which aren't tied to specific HTML elements...

.orange {

 background-color: orange

}

Note that .orange doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to highlight important text on your page, apply the above style to a <p> tag...

<p class="orange">Cascading Style Sheets</p>

Note that the period (full stop) before the class name is not included.