June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
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.
Visit John Allsop's complete CSS Guide for more information on style sheets.
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.
Use the style sheet from Activity 1 to create several Web pages that import the style sheet.
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:
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