CSS part 1 - The origins of CSS

From today We'll start looking at Cascading Style Sheets, or CSS for short. I will assume that by now you have a good grip of HTML and you've familiarised yourself with the W3C, which is the World Wide Web Consortium. This body was set up to try to make standards for the internet so that the browser manufacturers, Microsoft and Netscape being the largest at the time, didn't mess the internet up in their struggle to try to gain superiority in the browser market, when the internet was still forming.

The W3C had a big job on their hands, tryin to pick the bits out that would form a HTML standard. What's a HTML standard and why's it necessary? The thing was that each browser manufacturer had it's own ideas of what it wanted from their browser and so each manufacturer invented their own tags. If you thought remembering the tags now is hard, imagine how frustrating it was when you had one set of tags that worked with Netscape Navigator and another set of tags that worked with Internet Explorer. This was in the days when Netscape was used by everyone and Internet Explorer wasn't big yet, a long forgotten history for most of the readers of this article I know.

One example of a tag that shows what I mean was the <Blink>& tag. In Netscape this made the text enclosed within the tags flash on and off. Was there a point to this? Well it was gimmicky and so some people thought "yeah I want text that flashes on and off" and went and used Netscape instead. This put Netscape ahead in the so-called "Browser Wars". Microsoft introduced a crap tag of it's own I think called the <marquee>& (if there are any experts out there I apologise if I'm completely wrong about this) which scrolled a piece of text along the screen. Crap but then before javascript how else were you gonna be able to make text move across the screen.

Some of these tags were taken by both browsers later, some tags were taken by W3C and the latter pretty much said "Look guys, let's stop faffing about and make some tags that everyone can use, yeah" so they made an official bunch of tags that we now know and love (well sort of in both cases). These official tags, which can be found on the W3 site here make up what we call the W3 standard today.

The problem was that HTML was never designed for displaying formatted text and images really. It was designed in CERN, the European Centre for Nulear Research, which is a physics lab basically. It's function was to share logical information.

Something had to be done to prevent the browser manufacturers from inventing new tags. The problem was that as the existing tags were a little restrictive. Thus the idea of Cascading Style Sheets, or CSS was born.

One cool thing about CSS is that it seperates content from style so that when you change the content of stuff you don't need to worry about the presentation at the same time and when you change the style you don't have to worry about changing the style of each individual part. It's WELL powerful.

CSS formatting allows us to take existing HTML tags and just modify them to suit us. Now, rather than inventing a tag that lets you type in a double space like say <doublespace>& we can just take a tag that exists already and change it so it does the same thing!

The dudes who invented CSS had to think about pretty much everything that you can change about a tag and figure out how to do it. Take for example a simple word like "Bellend" - how many things do you think you could change about the way that this word is displayed on-screen?

Colours, spacing, height, width, whereabouts it is on the page, what coolour the background is, the list goes on and on. And that's only for a bit of text. What about images you say? Well CSS covers these too.

Well CSS designers had to think of a standard for this, which encompasses everything you can do with well...everything. And they had to figure out how people were going to implement this in their web pages. And they came up with CSS1. Obviously as people used that they found one or two improvements, and CSS2 came out later (HTML evolved too, through at least 4 incarnations) - we're on XHTML now) and I think they are now on CSS3.

And now that we've done HTML to death and seen just how restrictive it is, that's what we are gonna learn about in the next few months. For an early lead get a book out or two.

Here's some references for you...

Web
Obviously the first place you need to go is the W3C website for the official lowdown on CSS. Anything else you can look up yourself and there are LOADS of tutorials online
W3 Cascading Style Sheets homepage

Books
At the moment I'm reading and teaching myself this from 2 books, both of which I got out of my local library - no point in spending money!

1. "Core CSS - second edition" by Keith Schengili-Roberts
   
2. "CSS Web design for Dummies" - by Richard Mansfield
   

Topics covered so far

We've covered

• Basic HTML
  
• Formatting and linking
  
• Tables
  
• Frames
  

We still need to cover forms before moving to css then to javascript.

New site design

I've used a template from www.blogskins.com to customise the look of this blog. I'll make further modifications at a later date.