9. Cascading Style Sheets (CSS)

9.1 Overview

Up until now we have been looking at manipulating text, graphics and tables using tags on a very specific and individual basis. This is all very well but it makes a website more difficult to manage the larger it becomes i.e. it is not very scalable. Cascading Style Sheets (CSS) allow you to change the style of a section, a page or even a whole website from just one or two locations. HTML 4.01 strongly encourages the use of CSS to such an extent that tags such as <CENTER>, <FONT> etc. are being dropped from the specification. The decision to use CSS needs to be made at the start of the website coding design process as every page is affected. One thing to be aware of is that there are still some browsers out there that do not support CSS. These browsers will render pages using the default font and size as a best effort.

9.2 Linked CSS

The most powerful way of using Style Sheets is via a linked .CSS file. This file is a separate text file that exists on the website, and is referenced by any web page that uses it. The link to the .CSS file is created within the <HEAD> and </HEAD> tag pair using syntax like <LINK REL="stylesheet" HREF="file.css"> assuming that file.css sits in the same directory as the web page that references it.

Before you can type out your .CSS file you will need to decide how you want to style your website. This will include how you want headings, lists, tables, links, text, in fact any web page element.

If you wish to define a particular heading style rather than rely on the default header tags, then you can do this within the .CSS file using the format .name { attribute: value, value.... attribute: value, value... etc.}. So for a new header style called headnew we could define it in the .CSS file using the code .headnew { font: bold 20pt Arial, sans-derif; letter-spacing:3pt; color:#FF0000}. This will give us a Red header (colours can be named if you want), which is 20pts in size and is in bold using the Arial font. We are even able to determine parameters such as the spacing between the letters. As well as bold, you can also use bolder, lighter or oblique. Even though the .CSS file has been linked within the web document, it is still necessary to pick the header that you are going to use for the particular element that you are using at the relevant point in your HTML code. This is achieved in our example by calling the headnew header using the code <SPAN CLASS="headnew">heading text</SPAN>. Now if you decide to change the style of your heading, you can do this within the .CSS file and the header changes in every web page that has been coded to reference it. This goes for all the headers that you have defined in the .CSS file and that have been referenced within elements across all the web pages.

You can decide to change the default font for the whole site by defining another font within the .CSS file called say 'defaultfont', and then applying it to each page within the <BODY> and </BODY> tag pairby typing <BODY CLASS="defaultfont">. The only place that is not affected by the inclusion of this 'defaultfont' in the Body tags, is in Tables, so you would need to type <TABLE CLASS="defaultfont">. You can change font styles for whole paragraphs as well by typing <P CLASS="newstyle"> or <DIV CLASS="newstyle">. You may have noticed that the <FONT> and </FONT> tag pair have become superfluous. This is why the Font tags have been dropped from the HTML specification. The other benefit with the Style Sheet method of controlling fonts is that you can be much more specific in how you define the fonts that you wish to use.

If you wish to highlight some text, you can create a text background colour, say called 'backtextcolour', by typing .backtextcolour { font-size : 12pt; background: #0000FF; color:#00AAAA} which gives yellow text on a blue background.

The attribute text-decoration can be used to create underline, overline or line-through text. The vertical-align attribute can be used to align text as sub, super, baseline, text-top and middle. As well as letter-spacing, you can modify word-spacing, line-height and text-indent, all of which are defined in points (pt).

You are not just limited to changing text. You can define how your lists will look as well. For example, in the .CSS file you could define your 'newbulletlist' with .newbulletlist { font-size: 12pt font-weight:bold; color: #00FF00; list-style: circle; font-family: "Arial", serif} and then apply it to your list by typing <UL CLASS="newbulletlist">. for bulletted lists the list-styles can be circle, square or disc. For ordered lists, the list-style can be lower-roman, upper-roman, lower-alpha, upper-alpha and decimal.

You can place images behind text within the <P>, <H>, <DIV> and <CENTER> containers by typing something like div {background: url(url)} within the .CSS file. Now, whenever <DIV> containers are used, the picture will appear behind the text. You can decide to repeat the image along the x-axis by adding repeat-x, or along the y-axis by adding repeat-y, or you can display the image once with no-repeat.

How links appear and behave can be modified in the .CSS file with the following:

a:hover { font: value value....; color: value}
a:active { font: value value....; color: value}
a:link { font: value value....; color: value}
a:visited { font: value value....; color: value}

You can create a large number of variations, rollover effects etc.

How tables appear can be modified within the .CSS file including the cell containers <TH> and <TD> e.g. .table1 { border: 10px solid blue} produces a 10 pixel thick solid blue border. You can create for the border a dotted effect, each side differently e.g. .table2 { border-width: 5px thin medium thick; border-color: #FF0000,#00FF00,#0000FF,#AAAAAA}.

9.3 Why Cascading?

We have so far been using a .CSS file to create all the styles. This is by far the preferable option. You can however, create styles within a web document itself, and you do this within the <HEAD> container by typing something such as <STYLE TYPE=TEXT/CSS> </STYLE>. Notice how the style has been defined within comment marks! This is so that browsers that do not support CSS will ignore the STYLE commands.

As well as defining 'Styles' within the <HEAD> container, you can define styles specifically within the Body e.g. <SPAN STYLE="background: blue; font: Arial 10pt; color: white>. Those styles defined within the Body override styles created within the <HEAD> container, and these in turn override the styles created in the .CSS file. This 'cascade' of priorities is what gives the name 'Cascading Style Sheets'. Generally, the .CSS file should suffice for all your styles, however you have the ability to locally override a style, should the need arise.

9.4 CSS Example

The following code is from a .CSS file called test.css which exists on this website. This uses some of the ideas discussed above:

@charset "iso-8859-1";

.normaltext {
 font: 12pt Arial;
 letter-spacing 4pt;
 color: #000000
}

.greentext {
 font: 16pt Arial;
 letter-spacing 4pt;
 color: #00AA00
}

.blacktext {
 font: 10pt Times;
 letter-spacing 2pt;
 color: #000000
}

.smallitalic {
 font: italic 8pt Times;
 letter-spacing 2pt;
 color: #000000
}

.newbulletlist {
 font-size: 18pt;
 font-weight: bold;
 color: #00AA22;
 list-style: circle;
 font-family: "Arial", serif
}

.dropcap {
 font: italic 34pt Arial bold;
 color: #000000;
 width: 15pt;
 float: left
}

.heading1 {
 font: bold 22pt Arial;
 letter-spacing: 5pt;
 color: #AAAA00
}

.heading2 {
 font: bold oblique 18pt Arial;
 letter-spacing: 6pt;
 color: #00AAAA
}

.heading3 {
 font: bold 14pt Arial;
 letter-spacing: 2pt;
 color: #AA00AA
}

.footnote2 {
 font: italic 12pt Arial;
 letter-spacing: 2pt;
 color: #000000
}

.backtextcolour {
 font-size : bold 12pt;
 background: #0000FF;
 color:yellow
}

.underline {
 font: bold 12pt Arial;
 letter-spacing: 10pt;
 text-decoration: underline;
 color: #000000
}

.supertext {
 font: bold 6pt Arial;
 letter-spacing: 10pt;
 vertical-align: super;
 color: #000000
}

.table1 {
 border-width: 5px thin medium thick;
 font: bold 12pt;
 color: green
}

a:link {
 color: #0000FF
}

a:visited {
 color: #990066
}

You will see that I have layed out the CSS file in an easy to read manner. This way it is easier to add attributes on a line by line basis. Next there follows code from the web page where the CSS is being called:

<TITLE>CSS Time</TITLE>

<LINK REL="stylesheet" TYPE="text/css" HREF="test.css">
<STYLE TYPE="TEXT/CSS">
<!--
a:hover {
 font: italic 18pt Arial;
 color: red
}
-->
</STYLE>
</HEAD>

<BODY BGCOLOR="#FFEEE3" CLASS="normaltext">

<H1 CLASS="heading1">CSS Time (using heading1)</H1>

<DIV CLASS="footnote2">
<A HREF="wwcss.htm#code"><I>Back to the CSS
code</I></A>
</DIV>

<H2 CLASS="heading2">CSS Time (using heading2)</H2>

<P>
Normal text has been selected in the BODY and is black Arial.
</P>

<P>
<SPAN CLASS="dropcap">W</SPAN>e start this paragraph
with a
gimmicky Drop Capital style.  Then we
<SPAN CLASS="underline">underline
a bit here</SPAN> and then type in <SPAN
CLASS="backtextcolour">
some yellow text with a blue background</SPAN>.
We then use <SPAN
CLASS="greentext">green text for a while</SPAN>
followed by <SPAN
CLASS="blacktext">Times New Roman font in black</SPAN>.
To finish
with here is some supertext <B>X<SPAN
CLASS="supertext">2</SPAN>
+ Y<SPAN CLASS="supertext">2</SPAN> = Z<SPAN
CLASS="supertext">
2</SPAN></B>.  This is all achieved by using the
<B>SPAN</B>
element to encapsulate some text, and then 'classifying' the
text with a predefined
CSS definition.  Very much like creating your own tags.
</P>

<H3 CLASS="heading3">Tables (using heading3)</H3>

<P>
This table uses the BODY font settings:
</P>

<TABLE BORDER=1>
<TR>
<TH>Simple Heading</TH>
<TD>Simple stuff</TD>
</TR>

<TR>
<TH>Basic Heading</TH>
<TD>Basic stuff</TD>
</TR>
</TABLE>

<P>
This table has the Green font specified, plus some extra bits.
</P>

<TABLE CLASS="table1" BORDER=1>
<TR>
<TH>Simple Heading</TH>
<TD>Simple stuff</TD>
</TR>

<TR>
<TH>Basic Heading</TH>
<TD>Basic stuff</TD>
</TR>
</TABLE>

<BR>

<P>
Finally a list of bullet points of useless things not to remember!
</P>

<UL CLASS="newbulletlist">
<LI>The number of hairs on your head.
<LI>How much wind you produce in one week.
<LI>Why your car is better than his.
</UL>

<DIV CLASS="footnote2">
<A HREF="wwcss.htm#code">Back to the CSS Code</A>
</DIV>

Things to note are the fact that the hovering over the links is dealt with by an embedded Style within the page rather than the CSS file. If you click on CSS Time you can see how the page is affected.

10. Multimedia

Home

Disclaimer