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.
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 ;)
Great sites for learning more about CSS:
- W3 schools - Great CSS tutorial and very good as a basic reference list for CSS and HTML alike.
- glish.com - very useful resource with great fluent layout templates.
- css.maxdesign.com.au - Easy to follow and very thourough tutorials... very comprehensive collection of cool and funky css list for navigation
- css/edge - Eric Meyer is da shite! This site will make your jaw drop o_O
- cssZen garden - Shows the full potential of CSS... all layouts are done with the exact same HTML, only the css is different. Browse though the designs and be amazed.
- Position is everything - Excelent css layout ressource with lots of info on browser bugs and how to work around them. Love this site.