MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

Discussions and Answers

Discussion of Exercise 1

Style sheets can be used to make the formatting of the site more consistent. This consistency enables the 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.

Answer to Exercise 2

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

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:red; 
margin-left:2cm;
}
      

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>
      

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

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

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

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";
font-weight:bold;
font-style:italic;
color:gold;
margin-left:2cm;
margin-right:2cm;
}
      

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