Website design & development

Style Classes

The first thing we are going to do, is make some changes to our style sheet. Open your style sheet (.css document) in notepad. Click on the last line and press enter.

First, change the color at h1 from blue to green.
Now add a new style for table collumns. start with td.green, place your opening bracket {. Press enter and tab, then type the following: "background:green;" press enter and tab again and your closing bracket }
Your last entry in your style sheet should look like this
td.green{ background:green; }

Now in your index file, go to your first collumn in your first table, where we placed the image. In your opening tag, click just before the width attribute and type the following: class="green" .
Note the space between the end of that and the width attribute. it should look like this
<td class="green" width="70%">

Do the same with the second collumn of each table. Save this and refresh your browser to see what the changes looks like.
You will notice that your whole site sits a bit on the left. You have two options here, your could resize the first collumns to 85% and the second to 15%, or just resize the second collumns to 15% and add a new first collumn in each table that is also 15%. For this exersize, I have simply resized both collumns to 85 and 15 respectivley.

Go to your home link and immediatly before the word "home" put an opening big text tag. < big > Immediatly after the word "Home" close the big tag. < /big > Once you have done that, right click your index.html and copy it. Right click on a blank space inside your root folder and paste twice. You should now have an index.html, copy of index.html and copy(2) of index.html. Rename the copies to "contact.html" and "price.html"

Below is an image of what your page should look like now.
You can now go and change the paragraphs we wrote to anything you want. You could also change the images to fit your own site.

This is the end of our tutorial. Play around with the coding, and make some changes to make yourself more familiar with the coding, then you are ready to move on to the more advanced stuff.