MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

CSS

The style sheet standard supported by modern browsers is called cascading style sheets, or CSS. CSS files contain a set of rules for the formatting of HTML documents. An example is given below:

<html>
<head>
<title>UCT MSc IT Example 1 on style sheets</title>
<style>
    BODY {
    font-family : "times new roman;
    margin-left : 20%;
    margin-right: 20%;
    text-align : justify;
    background : ivory;
    color : black;
    }

    P  {
    text-indent : 2cm;
    }
</style>
</head>
    

A style sheet is a collection of rules that describe the format of the HTML tags. In the above example there are six rules describing the format of the BODY tag, and one rule for the P tag. There are two ways to write style sheets: the technically easier rule-based approach, and an approach that procedurally constructs a style sheet — such an approach is outside the scope of this unit, but feel welcome (if you any spare time) to visit various sites on this topics such as this one or search on Google for more.

Below is a description of the rules used in the above example.

Body - bgcolor set to "ivory", left and right margins indented relatively by 20%, font set to "Times New Roman" and text colour set to black.

P to indent the first line by and absolute value of two centimeters.

There are three parts to a style sheet rule, shown in the figure below: