CSS Lesson 1

Introduction

You briefly met 'style' in the HTML section (lesson 4). Now is the time to go into 'style more thoroughly.

Priority

Style is made up from rules applying to html tags and other elements on a web page. Each method of applying styles has its own degree of priority. Low man on this totem pole is the users own preferences. However you should not make it impossible for the user to have some say in how you pages appear. For example, sight-impaired users may need to enlarge the text.

The standard method of applying style is through the use of one or more style files. These apply style to all the pages on the web site, or at least to those pages linked to the style file.

Sometimes you need to apply a particular style to a single page or to a small group of pages. To do this 'style' becomes a tag in the 'head' section of the web page. This method takes precedence over the other methods.

Finally, The highest priority style is to inset the style as an attribute in the relevant tag. These methods are illustrated below.

Style Files

Style files comprise one or more 'rules'. Each rule has a 'selector' and one or more declarations inside curly brackets,'{..}'.

Each declaration comprises a 'property' followed by a colon, followed by a 'value' followed by a semi-colon.

Open your original css file in your text editor. You should see:
body {
   background-color: #ffffaa;
   color: #000099;
   margin-left: 5%;
   font-family: Arial, verdana, Helvetica, sans-serif;
   font-size: small;
}
.cen {
   height: auto;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}
Here are two rules, the first has five declarations and the second has four. The first rule applies to everything within the body tags; i.e. everything in the browser's display window. The second rule applies to a 'div', 'span' or other tag with an attribute 'class="cen"'. 'cen' is an author thought-up name meaning 'centre this'.

Previous Lesson previous lesson next lesson Next Lesson