Learning CSS

CSS is the way you style web pages. Once you pick up some of the basics, you'll never want to go back to the old way of <font> tags, tables, centering and <br /> and <p> tags for spacing.

Our list contains two kinds of things. First of all, we've got some tutorials, and you probably ought to go through one or two, but don't dwell on these tutorials too much. There's way too much information out there, and you don't need to learn it all now. You probably don't ever need to learn it all. Get a couple of the basics down, like how to tell web browsers where your style sheet is and maybe a couple of color and font styles, and then get started sylin'.

Web Design Reference: Cascading Style Sheets
This is the largest list of CSS tutorials and resources we've ever seen. At the University of Minnesota in Duluth.
Max Design Tutorials
Russ Weakley has taken some of the fundamental concepts of CSS and wrung miracles and wonders out of them. For instance, how many different ways are there to style a simple list? You'll find out. Here's a hint: you see the "breadcrumb" links just below the title at the top of the page you're reading now? It's a list. Go look at the source. Then head to Max Design and see what else you can do.
Colored Boxes
This is the tutorial you'll look back on and say, "That's the one that got me started." Way too many designers gather a huge pile of tools – editors, utilities, know-how – but they start a project, thrash around, try this and that, get lost, and eventually put it aside for the next weekend. They don't have an overall process, a big picture. Russ Weakley suggests a simple step by step process CSS newbies can follow and adapt as they learn. We used it to build our main page and then adapted it for this site, and we're past the newbie stage, but it was still useful for us. If you've been reading and learning and planning but not building, this is the one.
CSS Help Pile
Annotated links and discussion about the best CSS help sites on the web, plus a few resources of their own. You might start here on their beginners' tutorials, and you'll probably come back later for more advanced stuff.
David Doward's CSS Tutorials
Good introductory tutorial. There's some more advanced stuff here too, so don't forget to come back after you've been styling a while.
Starting With HTML+CSS
Tutorial at the W3C. Not a great tutorial, in our opinion, but it starts off with some pretty impressive styling effects, which should keep your interest.
3D Box Model
You may not know it yet, but you're going to really need to learn the CSS box model. Trust us, it's cool. This 3D representation of the box model by John Hicks at Hicks Design shows how each element overlays the others. One glance and you'll remember it for life.

Advanced Tutorials And References

Here's some more advanced tutorials and reference sites. Come on back to these after you've been using styles a while. If you're having a problem, chances are, someone else has had the same problem and they've published a solution.

And don't forget our Inspiration and Graphic Design and Layout pages.

QuirksMode
Peter-Paul Koch's website, stuffed full of CSS hints and tricks, especially for coping with various web browsers' quirks.
Box Lessons
At The Noodle Incident. Here's where you come when you run into browser peculiarities that are giving your layout problems.
Russ Weakley Articles and Presentations
OK, this is now officially the Russ Weakley Worship Page! These articles and presentations at Max Design are worth reading too.
Tantek's Mid-Pass Filter
This is a little CSS gimmick that passes styles to Microsoft Internet Explorer 5.x but not to any other browsers. That browser has a number of quirks, and this can be a lifesaver if your page is snagged on one of them.
Advanced Tables Tutorial
Tables are great – for tabular data. And CSS has added a lot of new tricks for tables. Here's a well organized presentation by Mark Lynch.
Web Standards Group
They've got a good collection of articles, but the best thing about the group so far is their lively mailing list. Even if you send the email to /dev/null, the archives are worth the trouble of joining. A lot of smart folks there, and us (we're members).
CSS Play
From Sea Mus N Squirrel. A bunch of playful and useful CSS tricks.
CSS Rollover Buttons
By Mark Angletti. No preloading, no flicker in MSIE, but a perfectly good rollover effect using nothing but CSS.
Holy CSS, ZeldMan
Andrew Fernandez's meta-list of CSS, accessibility, and standards links.
The Noodle Incident
By Owen Briggs. Information about his book and a brilliant set of problem-solving tutorials.
Picment.com Articles
Customized corners and fun with forms (so far).
CSS Drop Shadows
By Sergio Villarreal at A List Apart. We've experimented with CSS drop shadows ourselves, and we're too embarrassed to post the link because his are so much better.
Position Is Everything
Big John and Holly Bergevin talk about browser bugs and give tutorials (don't miss the one on how to clear floats without structural markup — you'll use it).
CSS Vault
Wonderful set of inspirational uses of CSS and CSS tips and tricks.
Rounding Tab Corners
Eric Meyer's tutorial on making tabs with rounded corners using CSS.
CSS Bugs in IE5.x Mac
CodeBitch's article in Mac Edition. Not much on workarounds, but a good list of major bugs.
Netscape 4 Bug Guide
At richinstyle.com. Most people's first reaction to reading this is uncontrollable weeping, because this brain-dead, broken browser is still out there. But despair not. The quick way out is to serve the page up unstyled to Netscape 4, which is a perfectly reasonable thing to do: it's still usable, it just isn't pretty. The way that takes a little longer (but after a while it goes pretty quickly) is to serve Netscape the things it handles reasonably well and then only let the good browsers see the fancy stuff. Look on the page you're reading for links to articles that tell you how to do that.
Newt Edge
Lim Chee Aun's site, chock full of bleeding edge CSS examples and enough explanation that you aren't left out there hanging off the edge.
Sliding Doors Box With Rounded Corners
From Ryan Thrash. The "sliding doors" refers to Douglas Bowman's technique at A List Apart.
Peekaboo Bug (Google search)
Perhaps the most annoying bug in Microsoft Internet Explorer's page rendering. Not a CSS bug, but there's some clever CSS solutions, including the "Holly hack".
css-d
A continuing education class in CSS in your mailbox every day. You'll recognize the names of some of the folks who answer questions on the list.
Updated Simple Tabs
By Daniel Burka at Silverorange Labs. The tabs are a simple bullet list, and Daniel has now included secondary navigation below each tab.
Sons of Suckerfish
Some people really love drop-down menus. We don't, but that's probably because Opera handled them so badly for so long before they finally got it close to right. Anyhow, Suckerfish dropdowns first appeared on A List Apart, and HTML Dog has a good summary of further developments as well as their own contribution. If you want to try a dropdown, this is the place to start.
CSS Filters (CSS Hacks)
A chart at Centricle that shows the CSS hacks and which browsers will process them. For example, if you have @import url("foo.css"); in a stylesheet, you can see from the chart that Netscape 4 for Windows and Mac won't process that instruction. So any CSS that will make Netscape 4 fall down and hurt itself can be hidden in foo.css and Netscape 4 will never see it.
CSS Hack
CSS hacks are little tricks that can help you get around the bugs in various web browsers. This is an exhaustive listing of CSS hacks from the css-discuss list, along with some articles on whether or not to hack, and what the difference is between a good hack and a bad hack.
CSS Crib Sheet
Mezzoblue's indispensible list of "what to try next" and "what'll getcha" in CSS.
CSS Drop Shadows
By Craig Saila. Simpler drop shadows, including drop shadows for text.
css-d Topics
A university education in practical style sheet techniques by the members of the css-d email list.
YADM
(Yet Another Dynamic Menu) Chris Heilman's drop-down (or flyout, or expanding) dynamic menu. We aren't fans of dynamic menus and drop-downs, but we might actually use this one.
Full CSS Property Compatibility Chart
At corecss.com. Quick at-a-glance chart tells you whether a particular CSS property is supported, flakey, or really flakey in a huge list of browsers for PC, Mac, and Linux.
Points to Pixels to Ems to Percent
From Reed Design. It's approximate, but it's a good starting point. Better still, never get yourself into a position where you're relying on any of those equivalences to hold up, because sure as you're born, some browser (you know which one) is going to screw you up.
Nifty Corners
By Alessandro Fulciniti. Rounded corners without images!
How to Create a Photographic Gallery Using CSS
Stu Nicholls' cool photo gallery (thumbnails that magnify when you hover over them) using CSS.
MSIE White Space Bug Stomped
Did you ever have MSIE insert unwanted ugly blank lines between your list items? Here's the ultimate fix to get rid of that unwanted whitespace.
Explorer Exposed!
A site from the folks at Position Is Everything about all the bizarre bugs in Microsoft Internet Explorer, plus advice for working around them.