04
  • Go to http://www.csszengarden.com/ and read the information on the page. The site has been set up to demonstrate how web pages can be styled using CSS alone. All the pages on the site use the same html but have been styled using different CSS.
    Download the html source code from the csszengarden website. Notice that all the content is produced from this html file. The html file is not concerned with layout. All the layout and sytling comes from the stylesheet.
    Download the zip file materials.zip containing the files for this exercise. Open the file practical.css. This is a partially completed stylesheet for the zen garden html. The layout produced by the finished stylesheet is shown in file results.jpg
    View html page and identify id and class attributes used in the file practical.css
    Add style rules to the selectors in the tutorial stylesheet to produce the layout shown in the results.jpg. The comments /* */ in the stylesheet show you where to add code and give you some indication of which style rules you should use.