Tutorial ‘O The Day: CSS
Last week in a Monkey Bites post about the 10th anniversary of Cascading Style Sheets a number of people left comments expressing some confusion and perplexity about how to use CSS. I wish I had the time to whip up a tutorial for you, but I don’t.
I thought the next best thing would be to create a Tutorial o’ the Day feature here on Monkey Bites. So here’s how this will work: each week we’ll pick a programming language, popular internet design trend or similar theme and then every day we’ll link to a tutorial on something in that theme.
Since this was inspired by CSS I thought we’d start there.
There are thousands of CSS tutorials out there, but one CSS feature that it took me a while to understand is the float: feature. Floats are an easy way to create the multi-columned layouts that many popular sites utilize, without resorting to table tags.
The best tutorial I’ve found on how to use floats comes from Max Design. But “Floatutorial” isn’t just a one trick pony, it’s actually a whole bunch of tutorials condensed into one easy to browse page. These tutorials will walk you through “the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.”
I should also note that Max Design has an excellent CSS showcase called Listamatic which will show you how to create a navigation menu of just about any shape, size and arrangement you want using a simple unordered list.
If you have other suggestions or recommendations for people just getting started with CSS or those hoping improve their existing skills, be sure to leave them in the comments below.
Also if you have ideas for future tutorial themes, email me at: scott_gilbertson@wired.com
