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
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
