Creating CSS Style Sheets

Style Sheet Definition

A style sheet is used to define what the presentation of a range of web documents will look like. It is in effect a template which can be used to define features like the colour of links and text, and indentation of paragraphs. It can also be used to control the positioning of objects. A style sheet is specified using a style sheet language - CSS1. This language is used to specify a set of 'rules' which define the required style. Perhaps the most important reason for using a style sheet is that it separates style from the structure of a site. Suppose a web site has 500 pages with a particular background color, and the color is to be changed. If a style sheet is used, only one value in the style sheet has to be changes. If the color is embedded in each page, 500 values need to be changed.

Linking to a Style Sheet

Using this method, a style sheet is stored in a separate file with the extension .css, and is stored as plain text, as with HTML. It can then be applied to a range of documents, and if the style is to be changed, it need only be changed on the style sheet, and not in each document. Web pages are associated with the style sheet by using the <LINK> tag:

This would be placed between the head and body section in each web page.

Style Sheet Rules

Style sheets define a web page presentation style by the rules they contain. A rule defines the style of one element of the page. Rules consist of a selector (relating to an HTML tag) followed by a style declaration enclosed in curly brackets:

H1 {color: red}

The style declaration consists of a property name and its' value.

Multiple properties for a selector can be grouped together and separated by semicolons:

H1 {color: red; text-line: center; font-size: 18pt}

Selectors can be grouped together in a single rule, separated by a comma:

H3, P, UL {font-size: 12pt}

Contextual selectors can be used to specify different styles for the same selector in different contexts. The LI selector, for instance, can be associated with UL or OL selectors:

OL LI {list-style-type: decimal}
UL LI {list-style-type: square}

Creating A CSS Style Sheet

A CSS style sheet can be created in any text editor, providing the resulting document is in plain text (like HTML) and the file has the file extension '.css' . Simply open a new text document, enter the rules (and nothing else) as outlined above, and save the file with the .css extension eg mystyle.css . This is the file name used in the LINK tag on each web page as outlined above.

Cascading Style Sheets CSS 1

Creating CSS Style Sheets