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:

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