External style sheets

Ok, open up a new, blank document in notepad or your favourite editor and type in the following:

Now save this file as "my_funky_styles.css". Congratulations!!!! You've just made your first external style sheet!!

Hmm but how do we use this? Fisrt lets make up a basic html page. Open up another new documnet in notepad and ener the following:

Now save this as "fat_free.html" and make sure you save it in the same directory as my_funky_styles.css. If you're unsure as how to do that then I reccommend you review my html lessons.

Ok so assuming you have done my html tutorials or you knew a little html before comeing here to learn about css, you should recognise what's going on in the code with the html file, open it up, it should look like this example. Hmm but the background isn't blue.

We need to add some code into the head of html file to tell it take it's formatting orders from our my_funky_styles.css style sheet, let's do tha now:

Save your html page, say "abracadabra" and open it up again in your browser. If you pronounced abracadrabra right, you should now be viewing a webpage looking something like this.

Now if you make as many different html pages as you want, and as long as you have the line in the head

telling the page to follow the style set out in my_funky_styles.css then every one will have a blue background.

Go ahead, make up a few other html pages and try it out. Once you've done that, try editing your style sheet change "blue" to "pink", say "abracadabra" and behold, all of your pages will now have a pink background!!

Ok now we know from html that the body has more than just a background attribute, we also know that there are many other elements in our webpages that can manipulated so lets add a few changes to my_funky_styles.css

If we want to change more than one attribute or property of each selector, then we seperate then with the semi-colon. To make it easier to read, you may put each property on a new line in the document. In the above CSS stylesheet, we're telling our pages that pink is now our default background color, blue is now our default text colour except in the of heading 1, if we use the <h1> and </h1> html tags those headings will now be cyan and, they will be aligned to the right side of our page. Wherever we use a paragraph(<p> and </p>) our paragraph will have a left margin of 50 pixels.

You can see an example of the above changes here.

I'll go into more detail of all the different elements you can change with css later, but first lets look at how to use "internal" style sheets.

Click here when you are ready to continue.

Lesson added Tuesday 16th December 2008