lecture 2: styles demo

The two coloured "boxes" below are miniature versions of two web pages. In a moment you will be asked to follow the links to open up their full-size versions in separate browser windows. When you do, however, you will see that the text on the web pages is identical (it's the simple "film quotes" page we set up in lecture 1).

In fact, you should use the "View Source" facility to look at the HTML of each page and you will see that the code is identical as well. How than can they look so different in style? The answer lies in one small and crucial difference between the pages. You can try and spot it for yourself if you want, although it will be pointed out on the next slide.

See the "antiquarian" page

See the "cool water" page

The important thing to realise is that tags mostly work to structure pages. For example, this page has passages of text marked up as headings (<h1> tags), passages marked as quotations (<blockquote> tags), and passages marked as ordinary paragraphs (<p> tags).

However, each of these tags can have a particular style applied to it. The pre-reading discussed this in general terms but the next few slides will give you practical experience in creating a style sheet to use on your own pages.