A Case Study

The idea that I had when starting this page was to show you something of the process behind the styling of a web page. Examine the source code behind the page at each stage. Use the back arrow to return to this page after examining each example.

To make life simpler, the styling is put into the 'head' section, rather than in a separate file as you would do in real life.

Creep up on your style as shown on this page. If it doesn't do what you want, look first for typos; missed quotes, misused upper case letters, missed colons or semi-colons. Don' forget to look in the html as well as the CSS!

First

The page with no styling:

Second

The page with basic styling. This page has a pale yellow background and blue sana-serif text

Third

The page is now restricted in width by using 'div' called 'wrapper'. The background colour outside the content i made darker. However, some things appear to have gone wrong. As you change the width of your browser, you will see that the text is tied to be near the left hand side; not almost centred as in the second version. The margin around the text has been lost.

Fourth

This version now has an extra 'div', the 'content'. To Make it a bit more obvious, the margin background colour has been darkened.

Note that the content has been centred on the browser window by making the left and right margins for the 'wrapper' 'auto'.

Fifth

Perhaps you want add some pictures. Here are two.

Sixth

Reposition these pictures, the first into the text and on the right; the second centred below the text. As 'rblk' and 'cblk' ('right-hand block' and 'centre block') may be used more than once, they are made 'class' rather than 'id' which can be used only once.

Note that we've taken advantage of 'cblk' to centre the main heading. That is why there is a 'text-align' as well as a 'float'. This is the Swiss-army-knife principle!

Seventh

Now how about some navigation. Its background color is orange to stand out, not to look good. Note that the heading is still centred on the page. Its in the 'wrapper', but not in the 'content'.

Eighth

How about some captions on the illustrations. Note the errors introduced by the captions. Fortunately, this can be cured by the use of <br />

Ninth

And this is the result after playing with some of the parameters. Not pretty, but it shows how style can be developed without causing fear and despondency.