Step 3 - Style

Well its been alot of hard working getting to this point but we're finally there, styling and laying out your page! So how do we go about it you ask? Well if you've followed all the advice so far and haven't skipped anything it should be easy. All you need is a Style Script which I will now give you basic instructions on.

To make our stylesheet I am going to use the Adding Classes example as a basis. Lets start off with what our stylesheet looks like, open notepad and save it as main.css, then format it to look like the following:

That is a very basic stylescript allowing only the main body tag to be formatted. However you remember we added those classes to the webpage earlier? Well we need to define them in our stylescript so we can edit them, to do this all you need to do is add the names prefixed with a dot (.) and suffixed with an open and closing Parathesis ({}) one after the other, I'll show you in another example below using the classes from our Adding Classes Example.

So now we have a basic stylesheet created, although at the moment it does nothing but sit there, so lets make it make the background black and the text white, all you would do is add the following:

As you can see, the text within the brackets follows a particular pattern,

Element Effected : How its effected ;

As you can see the equals of HTML is replaced with colon and each particular item is closed by a semi-colon, so if you had 2 factors you wanted to effect you would type:

color: red; background-color: blue;

Simple? I thought so, for all the possible elements you can change I would recommend visiting W3Schools who have a complete list and several tutorials for using style scripts more effectivly.