Chapter 8.

Style Sheets
Table of Contents

Objectives .............................................................................................................................................. 1
8.1 Introduction to Style Sheets ......................................................................................................... 1
8.1.1 Advantages of Style Sheets.............................................................................................. 1
8.1.2 Disadvantages of Style Sheets ......................................................................................... 2
8.2 CSS .............................................................................................................................................. 2
8.3 Important Note About Rules ........................................................................................................ 3
8.4 In-line Styles ................................................................................................................................ 3
8.5 Embedded Style sheets................................................................................................................. 4
8.6 Imported Style Sheet .................................................................................................................... 4
8.7 Classes ......................................................................................................................................... 5
8.8 Cascading Style Sheets ................................................................................................................ 6
8.9 Review Question .......................................................................................................................... 8
8.9.1 Review Question 1: Reflection on Style Sheets ............................................................... 8
8.10 Discussions and Answers ......................................................................................................... 8
8.10.1 Discussion of Exercise 1 ................................................................................................ 8
8.10.2 Answer to Exercise 2 ..................................................................................................... 9
8.10.3 Answer to Exercise 3 ..................................................................................................... 9
8.10.4 Solutions to Exercise 4 .................................................................................................. 9
8.10.5 Solutions to Exercise 5 ................................................................................................ 10
8.10.6 Solutions to Activity 1 ................................................................................................. 11
8.10.7 Discussion of Review Question 1 ................................................................................ 12

Objectives
At the end of this chapter you will be able to:
• Explain the advantages and disadvantage of using stylesheets;
• Use CSS to create web pages.

8.1 Introduction to Style Sheets

There is no format to follow for teaching the aesthetics of style - most people, though, can recognise something
that follows a classical design. But some things can be said about the style of a website. For instance, when
Web pages belong to the same website, each page should have a consistent look in order to provide familiarity
for the user.

Style sheets (sometimes referred to as templates) are used in desktop publishing to provide consistency when
formatting text. The format applied by the stylesheet could be to indent every first line of a paragraph by
2cm, insert a page break at the end of every chapter, and so on. Naturally, due to multimedia, Web pages
not only have to consider text formatting, but also visual and sound presentation, and various multimedia
formats in general. Before we continue, let us briefly discuss the advantages and disadvantages of using style
sheets.

8.1.1 Advantages of Style Sheets

1. Multiple Styles - A single document can be presented in multiple styles by using multiple style sheets.

2. Re-styling - The use of style sheets (which are separate to the HTML files) allows the quick re- styling of
any document, without modifying the original HTML.
 Style Sheets
3. Document maintenance - The ability to re-style many documents allows us to easily make changes to the
appearance of many Web pages without separately editing each one.

4. Consistency - Style sheets guarantee consistency throughout website.

5. Optimal file size - The smaller the files the faster the download. Using style sheets can help minimize
file sizes, since, for example, every < font > tag, is defined in one place in a style sheet, rather than in multiple
places in the HTML file.

6. Style and structure - When first developed, HTML was only concerned with document markup and not with
the document's formatting. This eventually changed, with more and more functionality being added to HTML to
allow for formatting. With the introduction of style sheets, the HTML document is again concerned only with
structural document markup — all formatting is now placed in the style sheet.

Exercise 1

Visit the UCT Computer Science Department website [http://www.cs.uct.ac.za] and suggest how the above
advantages of style sheets can be used. You can find some discussion on this at the end of this chapter.

8.1.2 Disadvantages of Style Sheets

1. Browser dependency - Style sheets format things slightly differently on different browsers.
Unfortunately, browsers have different support for HTML and style sheets. Newer browsers have largely
converged on HTML support so that HTML documents look the same across different browsers. The state
of style sheet support is somewhat worse, largely because style sheets are newer than HTML.

2. Old Browsers - Some very old browsers (such Netscape Navigator 2) do not support style sheets. All in all,
style sheets have only minor disadvantages, and should be used when developing websites.

To Do
Read up on style sheets on your text books. Can you see any advantages or disadvantages that have not been
presented here? Also use the Internet to find out more about the usage of style sheets. A good starting place is the
W3C's section on style sheets [http://www.w3.org/Style/].

8.2 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
2
 Style Sheets
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 [http://csgrs6k1.uwaterloo.ca/
~dmg/dsssl/tutorial/tutorial.html] or search on Google [http://www.google.com] 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:

8.3 Important Note About Rules

Notice in the given example how each rule is separated by a semi-colon (;). If your code is not working, ensure that
the semi-colons are present.

There are three ways to apply the above CSS rules to an HTML file:

1. add them in-line to the HTML file itself, attached directly to the relevant HTML tag.

2. embed the rules into the HTML file

3. link the CSS file to the HTML file

The next section will look at each of these methods.

Exercise 2
Add a style sheet property to the given example to change the text color to dark red. You can find the solution at
the end of the chapter.

8.4 In-line Styles

In-Line styles are added to individual tags and are usually avoided. Like the FONT tag they clog up HTML
documents, making them larger and increasing their download times.

An example of an in-line style is given below:

<P style="text-indent: 2cm; color:darkred;">

This paragraph has been formatted using the in-line style command.

</P>
3
 Style Sheets
<P>
This paragraph has not been formatted using the in-line style
command.
>/P>

8.5 Embedded Style sheets

This method avoids duplication within a single HTML document. However, it still has its drawbacks:
every Web page on your site needs this embedded style sheet inserted; consequently any updates to the
style sheet have to be made to every HTML document that has the style sheet embedded in it. We have
already used embedded style sheets as they are the simplest to implement, here is another example:

<html>
<head>
<title> University of Cape Town, Example on embedded style
sheets</title>
<sty
le>
BODY
{
font-family : "times new
roman; margin-left : 20%;
margin-right:
20%; text-align
: justify;
background :
ivory; color :
darkred;
}
P {
text-indent : 2cm;
}
h1,h2,h3{
color:red
; margin-
left:2cm
}
</style>
</head>

.
.
.

</html>

Exercise 3
The above code has a deliberate mistake in it. Can you find it? You can find the corrected version at the
end of the chapter.

Notice how rules for the h1, h2, and h3 tags can be simultaneously defined. Embedded style sheets
should always be placed within the HEAD — preferably before the TITLE (i.e. not like in the above
example).

8.6 Imported Style Sheet

This gives you all the advantages of style sheets: by changing a single value in one file the format
4
 Style Sheets
change is propagated to all of the HTML documents linked to the style sheet. The style sheet is written just
as an embedded style sheet is, but, instead of inserting it in an HTML file, it is saved as a separate file
(usually with a .css extension). Each HTML document then imports the CSS file. There are two ways to
import a file:

Linking it
< link rel="stylesheet" href="
..//pathname//stylesheet_filename.css" type="tex

Importing it
<style>
@import (http://pathname/stylesheet.css);
</style>

The second option will only work for HTML documents on a Web server. If this is not the case,
use the first option.

Exercise 4
From the in-line style listing below, create an embedded style sheet and a linked style sheet.

< h1 style="color:red;margin-left:2cm" >h1

heading</h1>
< h2 style="color:red;margin-left:4cm" >h2 sub-
heading</h2>
< p style="text-indent:2cm;color:darkred;margin-
left:6cm">Paragraph 1</p>
< p style="text-indent:2cm;color:darkred;margin-
left:6cm">Paragraph 2</p>
< h2 style="color:red;margin-left:4cm" >h2 sub-
heading</h2>
< p style="text-indent:2cm;color:darkred;margin-
left:6cm">Paragraph 1</p>

You can find a solution to this exercise at the end of this chapter.

8.7 Classes
Sometimes you may wish to give different formats to different paragraphs in the same
HTML document. This can be accomplished by using classes.

A classic example is the formatting of publications in journals, where the leading paragraph is
an abstract and has the following format:

5
 Style Sheets

There are also many different formats for various other paragraphs. Each different paragraph type
can be given its own class name, such as "abstract". To do this, we use the P tag as shown in
the code below. Open a new file and type in the following code and save it as csexercise.css

p.abstract{
margin-left:4cm;
margin-right:4cm;
font-style:italic;
font-family:"times New roman";
font-size : 12pt;
text-indent : 1cm;
text-align : left;
}
.body{
margin-left:3cm;
margin-right:3cm;
font-family:"times New roman";
font-size: 12pt;
text-indent: 1cm;
}

Open a blank document and import the above style sheet. The abstract class is used as shown in the code below:

<P CLASS="abstract">

Exercise 5

As an exercise, add code to the stylesheet (csexercise.css) for the title, author, section heading and subsection
heading. You can find the solution at the end of this chapter.

To Do

Visit Webmonkey's article "Inject Some Style (Sheets) into your HTML" [http://
webmonkey.wired.com/webmonkey/html/96/34/index2a.htm]. Also visit the sites referred to at the end of the
article.

8.8 Cascading Style Sheets

The cascading style sheet standard supplies very powerful tools to control Web page formatting. For instance,
consider a university with many departments — each with their own individual design criteria — that is
producing a website. It is possible to create a hierarchy of style sheets that allows each department's website to
maintain formatting consistency with all the other university sites, while allowing each department to deviate from
the format where needed.

The hierarchical (cascading) structure of style sheets can be used to do this. The figure below illustrates the style
hierarchy design by W3C.

6
 Style Sheets

To Do
Visit John Allsop's complete CSS Guide [http://www.westciv.com/style_master/academy/ css_tutorial/index.html]
for more information on style sheets.

Activity 1
You are designing a Web page to display pop song lyrics (naturally the copyright has been permitted). The
information needs to be displayed on the page in the style presented below. Use only the h1, h2, body and p
HTML tags; note that two or more classes are needed for some of these tags.

• Artist: 14pt, Arial, Bold, Moccasin

• Song Title: 14pt, Arial, Normal, Khaki

• Album: 12pt, Arial, Normal, Khaki

• Year:12pt, Arial, bold, ivory

• Background: colour=Chocolate

• Verse: 14pt, Trebuchet MS, Bold, gold, margin-left 2cm, margin-right 2cm

• Chorus: 14pt, Trebuchet MS, Bold & Italic, gold, margin-left 4cm, margin-right 4cm

A solution can be found at the end of the chapter.

Activity 2
Use the style sheet from Activity 1 to create several Web pages that import the style sheet.

Activity 3: Drop-cap lettering & Tables

A company wants you to design a similar website to that of Activity 1. This company wants the Web page to
display their products prices in the format listed below:

7
 Style Sheets

The first letter example uses the span tag and is detailed below. Create a class fl with

the following attributes:

span.fl{font-size:32pt;font-family:"brush script mt";}

Place the required letter between span tags using the above class, as shown below:

<span class="fl">A</span>pples

8.9 Review Question

8.9.1 Review Question 1: Reflection on Style Sheets
Read the following case study and give reasons for asking certain question in relation to style sheets.

A school wishes to design a website. The function of this website is to let its students know when
assignments are due, the dates of exams, timetables, subjects taught, syllabuses and the teachers who teach
them.

The school wishes to have quality controls over the Web design, since the teachers themselves will be
responsible for updating the information on the Web.

1. The school has approached you to advise them on how this may be possible.

2. The school wants you to explain the process you wish to use, and why it is better than letting every teacher
write their own style.

3. Write a list of ten or more HTML tags and classes that may be used for the website. Consider the
attributes that may have to be used, such as background colour, departmental style, tables (for timetable,
exam, curriculum and annual), headers and so on.

4. After choosing the HTML tags, consider the CSS code required to style them.

Look at the end of the chapter for a discussion of this review question.

8.10 Discussions and Answers

8.10.1 Discussion of Exercise 1
Style sheets can be used to make the formatting of the site more consistent. This consistency enables the

8
 Style Sheets
user to recognise that they are on the Computer Science site no matter what page they are on.

Style sheets also enables the site to be more easily maintained. For instance, if it was decided that the
indentation was too large, the indentation on each of the site's pages can be changed by modifying
just one document: the site's style sheet.

8.10.2 Answer to Exercise 2

P {
text-
indent :
2cm; color
:
darkred;
}

8.10.3 Answer to Exercise 3

BODY {
font-family : "times new
roman"; margin-left :
20%;
margin-right:
20%; text-
align :
justify;
background :
ivory; color
: darkred;
}
P {
text-indent : 2cm;
}
h1,h2,h3
{
color:re
d;
margin-
left:2cm
;
}

8.10.4 Solutions to Exercise 4

embedded:

<h1 style="color:red;margin-left:2cm">h1 heading</h1>

<h2 style="color:red;margin-left:4cm">h2 sub-heading</h2>
<p style="text-indent:2cm;color:darkred;margin-left:6cm">Paragraph
1</p>
<p style="text-indent:2cm;color:darkred;margin-left:6cm">Paragraph
2</p>
<h2 style="color:red;margin-left:4cm">h2 sub-heading</h2>
<p style="text-indent:2cm;color:darkred;margin-left:6cm">Paragraph 1 </p>

9
 Style Sheets
Linked - html file

<html>
<head>
<link rel="stylesheet" href="ex4.css" type="text/css">
</head>
<body>
<h1>h1 heading</h1>
<h2>h2 sub-heading</h2>
<p>div.abstract </p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h2>h2 sub-heading</h2>
<p>Paragraph 1</p>
<body>
<html>

Linked - ex4.css

p.abstract{
margin-left : 4cm;
margin-right : 4cm;
font-style : italic;
font-family : "times New roman";
font-size : 12pt;
text-indent : 1cm;
text-align : left;
}
.body{
margin-left : 3cm;
margin-right : 3cm;
font-family : "times New roman";
font-size : 12pt;
text-indent : 1cm;
text-align : left;
}

8.10.5 Solutions to Exercise 5

New csexercise.css

h1{
font-family : arial;
font-size : 16pt;
font-style : bold;
Text-align : center;
}

h2
{
font-family : arial;
font-size : 14pt;
font-style : bold;
Text-align : center;
}

10
 Style Sheets
h3.sectionHeading
{
font-family : times new roman;
font-size : 14pt;
font-style : bold;
Text-align : left;
text-indent : 1cm;
margin-left : 3cm;
margin-right : 3cm;
}

h3.sectionSubHeading
{
font-family : times new roman;
font-size : 12pt;
font-style : bold;
Text-align : left;
text-indent : 1cm;
margin-left : 3cm;
margin-right : 3cm;
}

div.abstract{
margin-left : 4cm;
margin-right : 4cm;
font-style : italic;
font-family : "times New roman";
font-size : 12pt;
text-indent : 1cm;
text-align : left;
}
.body{
margin-left : 3cm;
margin-right : 3cm;
font-family : "times New roman";
font-size : 12pt;
text-indent : 1cm;
text-align : left;
}

8.10.6 Solutions to Activity 1

body{background-color:chocolate;
font-family:"arial";
font-weight:bold;}

h1.artist{color:moccasin;font-size:14pt;}
h1.songtitle{color:khaki;font-size:14pt;font-
weight:normal;} h1.album{color:khaki;font-size:12pt;font-
weight:normal;} h1.year{color:ivory;font-size:12pt}

p.verse{font-family:"trebuchet ms";
color:gold;
margin-left:2cm;
margin-right:2cm;
font-weigth:bold;

}
p.chorus{font-family:"trebuchet ms";
11
 Style Sheets
font-weight:bold;
font-style:italic;
color:gold;
margin-left:2cm;
margin-right:2cm;
}

8.10.7 Discussion of Review Question 1

The following answers are a guide only — you may have listed answers not included here. If this is the case, start
a discussion forum "Why Use style sheets?" and compare answers with other colleagues.

• You advise the school that cascading style sheets should be used. Your reasoning could include?

• Cascading style sheets reflects the school's structure. In other words, the school and its various
departments can each tailor the style sheet (using a hierarchy of style sheets) to suite their own image,
thereby providing some control and consistency over the overall layout without being too restrictive on
each department's Web page design.

• If the school were to change its image in the future, style sheets provide a quick and easy way to do so.

• If a design change is required during the development of the website, then style sheets provide a quick
and easy method to do so.

• You mention that if every teacher were to write their own style, the school's image would be lost. Further,
updating these separate designs to meet some future design standard is an arduous task.

• HTML tags:

• p, for text presentations.

• table.exam, for exam timetables.

• table.time, for student timetables.

• table.year, for yearly timetables.

• body, the style for the main page, which will be inherited by other pages.

• body.english, the style for the english department.

• body.maths, the style for the mathematics department.

• h1, headers.

• h2, other headers.

12