Cascading Style Sheets

CSS is used to add formatting and structure to HTML web pages.

This is because presentational effects were becoming integrated in the content of HTML, which was not its intended purpose and made it difficult to understand and edit.

Cascading style sheets allow designers to control how a web browser will display a web page while separating it from the HTML code.

One CSS can be written and applied to all of the pages in a website - an external style sheet.

The same information can be put in the header of the HTML document - an embedded style sheet.

Elements of an HTML page must be selected to follow a style rule.A style rule consist of 3 parts;

• a type selector (Normally the HTML tag)
• a property (The attribute you wish to change)
• and a value (Each property can take a value)

i.e. selector {property : value}

e.g. To make a paragraph red, you would use p{color:red}. If the value is 2 or more words, double quotes shoud be used; p{font-family:"sans serif"}

Multiple properties should be separated by a semicolon -

p{text-align:centre; color:blue}

Selectors can be grouped by separating with a comma; h1, h2, h3 {color:red} - makes headings 1 to 3 red

An embedded style sheet is placed in the head section of the web page source and is enclosed between the tags <style type="text/css"> and <style>

By far the best way of styling a website.

A single external style sheet may be linked to each web page throughout a website. Any changes made to the style sheet are applied throughout the whole website. It helps keep the styling consistent on each webpage.

A CSS external style sheet should be saved in the format MyStyles.css

Example style rule:

h1 { font-size : 16pt;

       color:orange

      }