MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

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>
<style>
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).