If you’ve been designing sites for a while, you probably started off designing using tables for layouts. Using tables for page layout has gone against W3C standards for several years now, but it wasn’t until the last few years that browser-support for CSS had really come far enough to give you any choice in the matter.
If you’re newer to designing websites, you’ve probably been taught CSS layout design and it’s already become a part of how you do things, but back in the day, CSS just wasn’t reliable enough to use as primary site layout for sophisticated designs. If you’ve been designing for at least 5+ years, you’ve (hopefully) already been using CSS for quite some time, for typographical formatting, basic page attributes, and so on, but may have still relied heavily on tables for the actual structural layout.
Now that solid, all-CSS layouts are a reality, where does an old-timer start in getting their CSS up to snuff to actually handle complex all-CSS layouts? It can be intimidating to get started, but thanks to the amazing community of design bloggers, you’ve got some great resources at your fingertips.
Note: Everything covered here is making the assumption that you are basically coding by hand and not using a WYSIWYG editor for layout – and that you have at least a basic understanding of how CSS works. If you’re interested in learning how to create CSS-based layouts in Dreamweaver, there is a great tutorial (including source files) available here, and another dealing with CSS layouts by way of Photoshop and Dreamweaver here.
Before You Begin
Making this transition is TOTALLY do-able, no matter how long you’ve been designing with tables – it just requires a little patience. When I first started web design, there were were only a handful of books on HTML (nothing on CSS) and not a web design class to be found. (Yes, and dinosaur’s roamed the earth, and cars were a dollar. Hush.) If I could make this transition, anyone can.
First, I think its important to demonstrate exactly how far CSS has come, and how incredibly robust it is for site layout. One of the best examples out there is CSS Zen Garden, which shows you multiple site layouts that are all very different, that all use the exact same HTML file, swapping only the CSS file. Click through to the different designs, and it won’t take long for you to see just how far CSS has come.
Taking the Plunge
The very first tutorial I would recommend is called Creating a CSS Layout from Scratch, on the Subcide web site. This is a long tutorial, but worth every page if you actually follow the steps. The author does a fantastic job of explaining why you use each and every attribute, how it impacts the design step-by-step, and potential pitfalls you might run into. It actually moves a lot faster than you might imagine, and you can get through it in about 20 minutes if you’re actually making changes to a sample file as you go (which I highly recommend myself, being a visual learner.) Follow the steps, making the changes discussed, and previewing your changes every time, so you get a clear idea of how each little CSS change makes a big impact on the end-result.
Also be sure to check out the Holy Grail article by A List Apart. In one page, you’ll see exactly how to create a liquid 3-column layout with very simple code.
Another great step-by-step, real-world CSS layout tutorial is by Webreference which walks you through a specific layout goal, providing code and explanations along the way.
Or, if you don’t need such a granular approach, SitePoint’s article, Breaking out of the Box with CSS, has a similar step-by-step method.
Also be sure to check out this list of 12 PSD to HTML/CSS tutorials.
An aspect of CSS design that is absolutely critical but can be a bit confusing for newbies is the float. Smashing Magazine does a great job illustrating where floats are appropriate, which ones you need where for a specific end result, and known bugs/workarounds in their article CSS Float Theory: Things You Should Know. Floatutorial is another great step-by-step that walks through how floats work in a very simple and visual manner. That one doesn’t go into quite as much detail as the Subcide tutorial does, which may be better for you if you feel you’ve already got a decent handle on CSS concepts, but might be confusing to someone a little greener.
One way you’ll really get a good idea of how CSS works for layout is by checking out some of the existing, semi-standardized layouts. You can use these as templates for your own designs, or just observe the different ways people have solved similar problems using CSS. There’s a great list of sample CSS layouts available on the Noupe website, and a list of 40 CSS layouts available on Mashable.Com. If those examples are a little too detailed and confusing, be sure to check out the Little Boxes demo, which shows you a small collection of very basic layouts (one box, two box, three column, etc) and then slightly more advanced variations.
Next Steps
Once you’ve mastered the basics, you should try creating some simple layouts from scratch using your newly acquired powers. Once you’ve got those nailed, you can create more sophisticated samples, or convert an existing table-based site into a CSS-based site, with a little help (or maybe more than a little help) from this tutorial from Liquid CSS. Incidentally, that tutorial does a great job of illustrating how the z-axis works in CSS, a concept that can be a sticking point for some people. Doing a table-to-CSS conversion will be time-consuming (and at times, possibly more than a little frustrating), but it will be great practice (since you already know what the site is supposed to look like) and will give you a practical reason to go back and update some of your old, bloated table-based layout code. Win win!
Soon you’ll be ready to check out some more advanced concepts in CSS, including fancy lightbox image effects and graphs, navigation menu image rollovers, prettier form buttons, reliable image-based buttons, sexy image buttons, and CSS speech bubbles. You may already be using some of these within your table-based layout, but how they work (or occasionally don’t work) may make a little more sense to you once you’ve gone through the process of learning CSS layout. Two more gems for great tips and techniques are Using CSS to Do Anything and 101 CSS Tips of All Time, both from Noupe.
I strongly recommend checking out Smashing Magazine, Noupe.Com, and CSS-Tricks.Com for some of the most thorough and advanced tips, tricks and tutorials you’ll find online. Add their RSS feeds to your newsreader if you haven’t already.
Best Practices
Like any other new technology (and by new, I mean new to you), reading up on and implementing established best practices will go a long way. There is an outstanding breakdown of best practices in the Smashing Magazine article 70 Expert Ideas for Better CSS Coding. Seventy may sound like a daunting number, but many of these tips address workflow, naming conventions and other aspects that are less confusing as learning the actual CSS, but will save you tons of time as you begin to make CSS more of a workhorse in your own designs. (I’m a big fan of having strong fundamentals, planning and workflow, so I may be a little biased here, but its served me well over the past fifteen years of developing websites professionally.)
Many of these tips are not for the faint of heart, and will require a pretty solid understanding of CSS before they will be meaningful, so you may want to get some practice in before tackling this article.
CSS Frameworks
Now that you’ve got a decent handle on CSS layout principles, you may want to look into using a CSS framework. (I leave this part for the end because understanding the fundamentals is key, and it’s tempting to skip right to using a framework instead of teaching yourself how to do it right on your own.) There are several decent CSS frameworks out there, each with their own pros and cons.
If you’re not sure what a CSS framework is, the Wikipedia entry says it well:
A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.
Wikipedia also has an extensive list of available CSS frameworks. Before you jump head-first into the CSS framework shortcut, Smashing Magazine has an excellent overview of CSS frameworks, including pros and cons (of which there are many on both sides), and a brief review of some of the more popular ones. The article is from 2007, but the principles remain important and valid today. If CSS franeworks interest you, you may also want to check out the blog post and comments on this article on the Monday by Noon website.
I personally almost never use CSS frameworks, for many of the reasons outlined in the Smashing Magazine article, but that absolutely doesn’t mean that I discourage you from investigating them and using them as a tool where appropriate.
Conclusion
Not that I necessarily agree with this website, but it makes me chuckle every time I see it. Obviously, there may be times when you’re under deadline, and you just don’t have the luxury of learning under the gun.
Realistically speaking, if you were to devote your full attention and effort to the basics tutorials here, making sure to actually follow along and do the code step-by-step, you would have a pretty decent grasp on pure CSS layouts within several hours. Several hours might seem like a long time to spend on this, and you might be looking for a shortcut, but if you really want to understand it, it’s worth investing the time, especially if this is what you do for a living. Find the time. It’s important.
