TechTutorials - Free Computer Tutorials  







CSS - The Idea and History 
 


Added: 07/24/2007, Hits: 3,455, Rating: 0, Comments: 0, Votes: 0
Add To Favorites | Comment on this article
In the beginning, websites were a simple affair consisting of long straight forward pages which you had to scroll quite a ways to be able to get to the navigation of the site. And you know what? It worked for the time. Then came frames, and it seemed as though frames would become the be all end all of the web design community. Finally we could have our navigation always at the users fingertips while allowing them to scroll through our countless paragraphs and random imagery we liked to call content. And then it happened, someone said "Enough with the frames, I can do this with a table!" and the nightmare of webmasters everywhere had begun.

See, tables had promise, with enough experience and talent, you could really have a lot of power in laying out your website. The problem? The code is ugly as hell. Let's face it, the more complex your website got with tables, the more you'd wind up having tables nested within other tables that were spanning across yet more tables. ARGH! The headache. But what was a programmer to do? Well, until stylesheets matured enough to allow you to have an option, we were kind of stuck.

But hold on, what exactly is a stylesheet anyway? Well, it's a list of rules, by which elements within a webpage are altered to make sure they fit those rules. It's kind of like having a dress code at work. Each person is an element of that company, and the company says you must conform to a specific dress code in order to be a part of that company. Well, the dress code in this instance is the "stylesheet". What makes that different than doing it the old way? Well, in the old method, you had to specify the styling for each individual object and that really lead to a lot of repeated code. Take for instance the company again, can you imagine the amount of manpower that would be required to go down to each individual employee and tell them what to wear? That company wouldn't last long if they did that, so they opt to give a set of rules for all employees, and it's the employees job to follow those rules. That reasoning is the same reasoning that stylesheets came about, now we can define a style for each of our elements, or even a specific group of those elements, and that group will conform to the rules we've layed down. In the end, we wind up with a very powerful tool at our fingertips, but it wasn't always so.

Fortunately, stylesheets have evolved enough to give us the power to finally get out of what I like to refer to as "table hell", and get into a much more manageable form of code. It didn't really happen until Cascading Style Sheets (CSS) version 2 (CSS2) though, as the first version of CSS (CSS1) was little more than a way to styleize what was already positioned. We could bold things, make underlines, overlines, strike-thrus, do nifty hover effects, and what not, but we couldn't really start replacing the vast majority of our code yet, as there just wasn't the ability in the standard at the time. CSS2 came along with the idea of actually being able to position the items in your markup where you wanted to, and how you wanted to. Finally CSS was more than just a toy for developers, it was an actual programming tool. There still remains however one major problem with the world of CSS, and it must be accepted before you can fully shed your table loving ways.

In the world of CSS (at least at this point), not all browsers are created equally.

Older browsers, such as Netscape 4.x, and IE 4.x are still used on some systems on the net (though fortunately in increasingly smaller numbers), and those browsers really don't handle CSS very well at all. And sure, the amount of people browsing with those is so small that you'll probably never take them into consideration, but if you're trying to run a business, then you just might want to rethink that last statement. No, the real concern comes with the difference of 1 special "modern browser", Internet Explorer (IE). See, IE is horrible about the way it handles CSS, and there have even been statements made by some suggesting that the IE way is trying to establish itself as another standard. Problem being that the whole reason behind standards is to make it so that 1 standard works for all situations. This is obviously not true so long as IE is different. Fortunately, there are ways to get around this.

Ok, so now that we've gotten all the background and warnings out of the way, lets get down into some markup and find out what we need to do to make a well designed CSS layout. First, lets compare 2 pieces of code, and see which one you, as a web designer, find easier to look at and easier to maintain:

Example 1:
Code :

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td colspan="2">
Welcome to my Website!
</td>
</tr>
<tr>
<td valign="top" width="150">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</td>
<td valign="top" width="*">
And here's my content! YAY!
</td>
</tr>
</table>


Example 2:
Code :

<div class="header">Welcome to my Website!</div>
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</div>
<div class="content">
And here's my content! YAY!
</div>


Ok, so that's a VERY basic layout, but both are able to produce the exact same looking website. One using a table, and one using CSS, but notice how much cleaner the second one looks? Let me reiterate that this is a very basic design, heck, I'm not even nesting tables which is often done and or required for more advanced layouts when using a table design. If you'd like to see that both of those are creating the exact same website, by all means, please click on the example names, they're both links to the result of that code. (Yes, there are some various alignment issues, however, without getting into a big speil about that, simply understand that they are fixable in both.)

So now you know that a CSS designed page can lead to cleaner code, but are there any other advantages? Sure, now that the code isn't relying on tables to lay it out and rather on "divs" or "divisions", you can freely change the CSS anytime you'd like to create an entirely new layout without having to modify a single part of your markup. That's what CSS designers like to call "separation of layout and markup", and there is no better example of that then over at the CSS Zen Garden. They've got a bunch of layouts, all using the exact same markup, and it really makes the point of showing how powerful CSS can be when used properly.

So there you have it, a little background and overview of CSS and what it's capable of. Sure, you didn't get to actually SEE any code, but don't worry, I've got other CSS tutorials that will be coming up very soon, and I can assure you, you'll be seeing enough code in those to make up for the lack of it in this one. So, for this article, that's all.

Note: This tutorial was originally published at www.peoii.com by Jamie Harrell and is reproduced here via the Creative Commons license.
Creative Content License





Comments (0)

Be the first to comment on this article


Related Items








7 Seconds Resources, Inc.




IT Showcase