How to specify style

In this module, we'll consider how to use CSS to add a bit of style to our simple page. Style consists of the visual aspects of the page, such as colours, sizes, and layout of various elements.

In this very simple example, we have specified the colour and font of the text of the first paragraph:

image of styling
Each aspect of an element that can be styled, such as colour or font style, is a property. Choosing a style for an aspect consists of specifying a value, such as the name of a colour or the name of a font style. (Yes, the term value is also used for attributes, just to make life more challenging.) The properties available depend on the type of element and the values available depend on the property. For example, text can be styled using the color property (color) or the font style property (font-style).

Styling information is written as a declaration of the form property:value, such as color:green and font-style:italic. Later in the course we will consider properties that can have multiple values; these are listed with spaces to separate them, such as in the following example:

border-color: red green blue yellow

We'll also look at ways of specifying which elements of an HTML page are to be styled. Since we'll be discussing both CSS and HTML, pay particular attention to which one is being discussed at a particular time. You can use colour-coding as a reminder: HTML has one colour (like this: <p>) and CSS has another (like this: font-size).

There are three ways of adding style. We will consider them all, as you may encounter any of the possibilities in web pages that others have developed.

  • Using a style attribute: adding styling information to a particular element
  • Using an internal style sheet: adding styling information for the whole document inside the document
  • Using an external style sheet: adding styling information for the whole document outside the document