Taking the Style out of HTML

CSS styles are great, but then, if your reading this you hopefully have already learnt some of the nice things it can do.

This little tutorial will show you how to take the styles you may have just
been learning and playing with and export them to an External Style
Sheet. This will not only reduce the amount of code on a specific
page, it will also mean one file can apply to a whole site, therefore you
make a change to that one file and it makes the changes across the whole site!

So, lets take something nice and simple, one little style affecting one tag.
Were going to say that we have applied the style font-size: 150%; to
an <H2> tag, this will just make the text look a bit bigger
than usual (while being relative to the font size being used, better accessability
than using pt’s).

To achieve this on a single page we could either use:

<H2 style="font-size:150%;">Text that is 150% the normal
size of H2</h2>

Which is Inline Styling, which would mean we had to type
that every time we wanted an H2 tag to be bigger. Else we might have it set
in the <head> of the HTML page like this:

<head>
<title>Blah</title>
<style type="text/css">
<!--
H2{font-size:150%;}
-->
</style>
</head>

This I call Document Level Styling (I’m sure there’s a proper
name for it but I can’t remember right now) and would apply the bigger font
size to all uses of the <h2> tag in that one HTML page.

This is all fine and dandy, however, you can probably already see the advantage
of the Document level styling over the Inline styling. You can set the style
once for the whole page rather than having to add it each time.

We can take this to the next stage, taking the CSS to
a completely separate file all on its own. We then tell the HTML page to look
at this separate file and use it as if the styles were within the HTML page
itself. Many pages looking at one reference file sounds quite desirable, saves
making changes to them all and once its been downloaded for the first page its
still there for all the other pages that use it.

Anyway, enough of the theory and reasoning, how do we actually do it?

Well, much in the same way as the document level styling, take the actually
styles themselves, that’s the H2{font-size:150%;} bit in this
case and stick it in a blank txt file all on its own. You don’t need any HTML
tags or anything round it, put that one bit of code above in a blank file
completely alone.

Now you need to save the file as a CSS file, this is simple enough, just
give it a name with .css as the file extension. In this case call it bigh2.css.

Now, put that file in the same folder as your other HTML pages and forget
about it for a bit. Open up an HTML page you want to use that style on in
your favorite editor. If its Dreamweaver or something then make sure your
in code mode!

Now, goto the <head> of your document and enter the following
tag:

<link rel="stylesheet" href="bigh2.css" type="text/css"
/>

This tag is basically saying, use(link) this stylesheet called
bigh2.css as a Cascading Style Sheet file. The /
at the end is for XHTML compliance which says all singular tags must end in
/> to close them.

Now, make sure you’ve used <H2> somewhere in your page,
save it to the normal folder and open it up in your browser.

There you should see any text in any H2’s is 150% its usual size. Go on and
expand on the idea, add more styles to your .css file and you’ll be laughing!!