The Power of CSS

Most people consider CSS a bit of a webmaster's toy. Why use CSS when you can use tables, and you are more or less assured that it will look the same in all browsers.

Well, that's at least for the people that don't understand the power of CSS. After a long long time of putting off re-designing the horrible table based template for my wallpaper site, I finally bit the bullet and did it.

Now, unfortunately I can't completely use CSS for everything, so the new design is a combination of largely CSS and a bit of tables for the gallery element.
The results are quite amazing. My load times have decreased, code is much much cleaner, and it's easy to update certain elements. Best of all file sizes are around 37% of the table based ones.

A brief example:
Table Based file: Size = 30KB Loadtime 4sec
CSS Based file: Size = 12KB Loadtime 1sec
Even if you add the external CSS file of 4KB to the file, it's still half that of the table version.

So that in a nutshell is the power of CSS. If done correctly it can be a huge help, and makes for speedier sites. Definitely well worth the effort!

 

For me the most awesome power of CSS is changing the layout of an entire site just through the .css file. Talk about a time saver.

It takes some planning up front, but is well worth it.

 

And that gets cached by the browser after the first load too.

So do background images - so after the first page load you can even stop the images having to reload for a while.

That increases page load times a lot too.

 

That is indeed very nice to do. Just a pity that in this case, I have to rely on some 3rd party code, that won't allow me to do that.

 

I love CSS

Actually making it work in IE and FF and Opera is a fun game in itself

Its pretty easy too, just gotta know few hacks here and there.

 

The hack part is the annoying part. I spent around 2 hours making it work correctly in both. Once I fixed IE, Firefox got messed up. Fixed Firefox, then IE was messed up.

Gives a little excitement to life though

 

Suprised you guys didn't mention what IMO is the biggest benefit behind page load times of CSS. And that is SEO! With less code in the page (especially when you include the css file) the content is pushed way up to the top of the page and the SE bots have less code to wade through to get to your content.

Being able to use H tags without them looking ugly is a plus as well

 

Speaking of CSS and SEO, there is one more benefit Not only you push content up the page, but you can also shuffle the content

Imagine you have 2-column layout, with navigation on left, and content on right hand-side. Naturally, you would first have navigation block in HTML file, followed by content. What you can easily do with CSS is push content block ahead of navigation in HTML file (upwards), because CSS takes care of placing layout correctly.

HTML:

<div id="content”>
<h1>Important stuff</h1>
 <p>Some other text.</p>
</div>

<div id="nav">
<ul>
  <li><a href="abc.htm">Link</a></li>
  <li><a href="abc.htm">Link</a></li>
</ul>
</div>

Code (markup):

CSS:

div#nav {
float: left;
width: 30%;
}

div#content {
float: right;
width: 70%;
}

Code (markup):

cool, huh?

 

I'm a newbie at CSS -- trying to break from table layouts. I've been convinced, but still have LOTS to learn. Anyhow, I hadn't even thought about the SEO benefits... Thanks for bringing that up!

 

I use css for all my websites and do them without tables, but just to say it's stuped to avouid tables in every case. If you have tabelar data use tables that's what they are made for.

 

hmm... seems I missed something... Did someone say it was stupid to avoid tables altogether?