Cascading Style Sheets

Some notes from the AQA Computing textbook on cascading style sheets.

HideShow resource information
  • Created by: Michelle
  • Created on: 05-05-11 11:35

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.

1 of 5

CSS

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.

2 of 5

Selectors

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

3 of 5

Embedded Style Sheet

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>

4 of 5

External Style Sheet

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

      }

5 of 5

Comments

No comments have yet been made

Similar Computing resources:

See all Computing resources »See all resources »