Defining a style
A CSS file is a plain text file with the extension '.css'. Within the file there
will be a set of style definitions in the following format:
target-element-identification
{
styling-type: style-value;
styling-type: style-value;
...
styling-type: style-value;
}
There are several ways in which the target-element-identification can specify which
elements within a web page are going to be styled. The simplest case will be where
a single XHTML tag has its styling attributes changed.
For example, to change the colour of all <h2> elements in a web page its style
sheet should include the following definition:
h2
{
color: red;
}
resulting in the following effect:
This is a <H2> element
This is a paragraph
If we want to apply the same style values to multiple elements we can specify a
list of elements. For example, to change all h1, h2, and h3 elements to font-family
'verdana' with colour 'red' we can do this:
h1, h2, h3
{
color: red;
font-family: verdana;
}
resulting in the following effect:
This is a <H1> element
This is a <H2> element
This is a <H3> element
This is a <H4> element
For simple style applications, the main hurdle for the developer is to remember
the style values that are available.
Comments
CSS comments are specified using the syntax /* ... */. Everything between the /*
and the */ is ignored by the browser when interpreting the style sheet.
Note: Those of you using a CSS aware editor will be able to take advantage of automated
CSS style types and values. For example, NoteTab Light has a CSS clip library which
will help considerably when creating a stylesheet. See the
NoteTab Light configuration page in the XHTML Tutorial.