Cascading Style Sheets

Cascading Style Sheets (CSS) can be used to style web pages.

While HTML tells the browser what to display on a page, CSS tells the browser how to display it.

CSS rules can be:

  • added to already existing HTML files
  • stored in separate .CSS files and linked to a webpage

CSS rules

A CSS rule set consists of:

  • a selector - points to the HTML element you want to style
  • a declaration block - defines the property and values of the style to be used

CSS rule set highlighting selector and declaration blocks with several properties and their values

In the case above the selector shows that the style will be applied to a heading.

The declaration block contains one or more declarations. These are separated by semicolons.

Each declaration includes a property name and a value. These are separated by a colon.

The entire group of declarations is surrounded by curly brackets.

Sometimes the declarations are shown on a single line like this:

h1{ color: blue;font-size: 12px;}

They can also appear on separate lines, so the same rule could appear as:

h1{ color: blue; font-size: 12px; }

In either form, the heading would show on screen as blue text with a font size of 12.

Note the spelling of 'color'. CSS rules use US English!