Some Introductory CSS Exercises

These exercise are intended to give you a hands-on introduction to CSS.
You start with some ready made files and alter them.
Little or no 'tuition' is included. (Some notes may be added in the future.)
The principle is that you do an exercise, look at what you have done, and develop understanding.

The Exercises

• These exercises (with some further exercises) will create a site containing translations of the poem Jabberwocky.
• The presentation of the site will be controlled by a CSS file.

Doing the exercises

• Work with the CSS file open in a text editor and the HTM file open in a browser window.
• After each amendment to the CSS file, Save the changed file
• and then Refresh and view the HTM file in the browser.
• If the changes have not had an effect, find out why (e.g. is the syntax correct?)

Before you Start (Important)

Basic CSS rule syntax:

selector { property: value}

e.g.  body { color: black }    /* foreground (text) colour set to black for page */

selector { property: value; property: value}

e.g.  body { color: black; background-color: tan }    /* and background colour set to tan for page */

selector, selector { property: value}

e.g.  h1, h2, h3 { color: maroon }    /* headers h1, h2 and h3 set to maroon */

Go to  www.w3schools  and get to know what is there.

The w3schools site will be a primary resource for you when you design and create web pages.

• Read the stuff explaining what CSS is, how it works, the syntax used, etc.
• Have a look round the various pages in the site;
• Familiarize yourself with what is there. Especially css syntax.
• Note the left hand column of links in the site.

 Tony D  March 2006