June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
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.
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;
}
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;
}
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;
}
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;
}
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