menu

links

desdemona's css layout template

This is my first go at a CSS layout template. Later a walk-through for modifying it will follow. This is still a work in progress.

Why css?

I'm very exited about CSS and the possibilities it presents.
CSS means Cascading Style Sheets and the basic idea is to seperate style and content. This means stripping your html of all formatting stuff like alignment, color, font style and size and leaving only the raw content. And then a seperate .css file is used to determine all visual effects like text colors and sizes, backgrounds, link effects and even positioning the element of the page.

The advantages are many: Smaller file sizes and quicker loading time - stripping your html will mean faster pages and with css you can style several elements in just one declaration. This means it's also a lot easier to make changes in the look of your website as you'll only have to go one place to edit. And there's so much more you can do with css like styling links and list to look fantastic, and positioning element very precisely without the use of clumsy and slowloading tables.
And that is just scratching the surface ;)

Why this project?

The basics of CSS is not hard at all. However, when it comes to relying completely on CSS for doing layouts things get a bit more tricky... especially since the most widely used browser (IE) does not fully apply to the CSS standarts.
This is my go at some hands-on CSS to get you started without knowing all the details. I hope this will make you want to learn more...
The layout is tested in IE6 and Firefox and is optimized for a 600*800 screen resolution.

How to use this layout

Use it and abuse it as you like... as a rough template to make your own layout, moddify it slightly (for example optimize it for a bigger screen res) or use it as it is. If you keep it intact or use my graphics please link to me somewhere ;)

CSS ressources

Great sites for learning more about CSS: