Adding CSS

I stumbled over this for a while, in my last post I mentioned how I was worried by CSS, well I had a reason.

However, I believe I have it.

There are two ways of adding CSS, External and Internal Style Sheets. If I were to add it internally, I would in the HTML for every page - seeing as I have only 3 pages and am struggling, I have opted for External.

An example taken from W3 Schools for an Internal Style Sheet is this:

(head)
(style type="text/css")
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
(/style)
(/head)

So the 'style type' bit identifies it as being CSS rather than something like JSS Javascript Style Sheets which Netscape 4 uses but no one else. Then the rest of the text defines the page, so colour, margin, background image etc.

For External Style Sheets I had to create a .css file. I opened notepad and copied the Simple Style Sheet offered in the exercises for week 2 and saved it as stsh1.css (style sheet one), saved it to a folder called CSS. Then I had to link my pages to it.

(Actually - at this point - it automatically 'worked' when I opened up the page to test it, turns out as I'd been playing around with the CSS I had enough on there to make it work locally. Only when I tried to upload it to the University computers that it crashed and died again.)

In the HEAD section of every page I created, I added this:

(LINK REL="STYLESHEET" TYPE="text/css" HREF="css/stsh1.css")

This is the link to the CSS file I have saved and this simple line is what turned my page from white space to something slightly more palatable.

Now I am afraid to play around with it for f34r of breaking it.