By: Tim Wright

March 4th, 2009

Reader Rating: 9.5

When I started collecting sites for this article, I assumed it would be easy since so many people had made great contributions to CSS. But then I realized that, rather than the people, it’s actually about the web sites. What web sites have advanced CSS? There are so many, and when I separated the sites from the people, it proved to be a tougher task than I thought.

I decided to split the list into two sections: The Obvious, and The Not So Obvious. The Obvious consisted of sites that everyone would immediately think of, and cause quite a stir if I left them off the list. The Not So Obvious sites were ones that might escape our notice at first, but very much deserve recognition for how they contributed to the overall advancement of CSS.

The Obvious

CSS Zen Garden [1]

In 2003 David Shea launched CSS Zen Garden with only five designs and since then it’s been at the front of the pack in the CSS web revolution. For many young developers, before you even crack your first CSS book, you’re familiar with Zen Garden and are already thinking about what your submission will look like. This site has made a lot of people very excited about the power of CSS and is, arguably, the most influential stop on the Web for CSS.

Meyerweb [2]

Eric Meyer—self-proclaimed CSS Jedi—runs meyerweb.com. And it’s no mystery what Eric has done for CSS. The Meyerweb Toolbox [3] and CSS work [4] areas are filled with goodies like S5 (an XHTML/CSS presentation program), CSS files (diagnostic and reset), CSS tests, a CSS2 prototyping test suite, and inline model documentation (I know, you’re mouth is watering already). By far, the coolest area of this site (other than the blog itself) is the CSS/Edge [5], where Eric puts up a lot of CSS demos and neat techniques he’s playing with.

A List Apart [6]

It’s difficult to put into words what exactly the crew [7] at A List Apart has done to advance CSS, let alone the Web as a whole. Some of their greatest CSS accomplishments (in my opinion) include: CSS Sprites [8], Sliding Doors of CSS [9], Progressive Enhancement with CSS [10], and From Table Hacks to CSS Layout: A Web Designer’s Journey [11]. They’ve written so many articles on CSS it’s impossible to read all of them if you happen to fall behind (believe me, I just went through the whole list); you can only hope that you keep up with their monthly publications so that you’re one of the first to find out about the new great CSS technique.

W3Schools [12]

W3Schools seems to always be at the top of search results when you ask a general coding question. They have tutorials on everything from basic topics like XHTML to advanced ones like RDF. But this is about CSS. W3Schools has some of the greatest beginner and novice CSS tutorials on the Web and it’s a great place to learn whether you’re starting out or just after a quick refresher on the terminology.

CSS3.info [13]

Every CSS minion knows that this site is the premier web site when it comes to finding out all the important info on the newest properties that are coming to light in CSS. The team behind CSS3.info [14] makes sure that the site contains the most recent and relevant information you can find on CSS3. And really, I’ve yet to find a site that offers the same level of insight as this one. As far as the future of CSS, this where you go when you want to cut out all the cruft and focus on the important information.

Position Is Everything [15]

P.I.E. is a site dedicated to all the browser quirks that drive us crazy on a day-to-day basis. Through learning the ins and outs of CSS this site has saved many of us hours of debugging, since we didn’t have to figure out the peek-a-boo bug [16] or the weirdness of the box model by ourselves. This site is a great asset for any CSS developer and its content is even becoming a topic of job interview questions for web developers.

Holy CSS Zeldman! [17]

Holy CSS Zeldman! is a great collection of Web Standards-related links akin to the digg RSS feed for CSS [18]. This site has been around for as long as I can remember, though I won’t say a site is great just because it’s a classic, or because it has Zeldman in the name. This site is around because it takes so many great CSS sites and promotes them in one collection for developers to sort through as they see fit, and is a big reason CSS is seen the way it is today.

CSS-Tricks [19]

Chris Coyier’s screencasts started a video revolution throughout popular blogs all over the Internet, and advanced the learning of CSS beyond reading long boring articles. From beginner tutorials to the more advanced topics like conditional style sheets, CSS-Tricks takes a step by step, visual approach to CSS—and people seem to really like it. Chris also runs a popular CSS/JavaScript link-sharing site called Script & Style [20].

CSS Galleries like CSS Mania [21], CSS Remix [22], CSS Website [23], and CSS Vault [24]

The goal of all CSS galleries is to bring CSS into the mainstream, so how could I leave them off this list, right? As I was gathering sites, I kept coming up with various galleries; I wanted to avoid scattering them throughout the list because I thought that would lessen this article. Yet galleries display all sorts of real-life examples of CSS work, and the people who submit their work to these sites are the ones on the front line of web design and development. They deserve all the credit in the world for keeping CSS and web standards alive across the Internet.

CSS Template Sites like Monster Templates [25] and Open Source Templates [26]

Just like CSS galleries, CSS template sites have the noble goal of raising the quality of sites across the Internet from the ground up, distributing templates to those who would normally slap a site together with a few tables. CSS template sites like Open Source Templates and Monster Templates helped further the CSS cause by making it easier to work with, and by removing some of the more frustrating elements of CSS like browser testing.

The Not So Obvious

ESPN.com [27]

Admittedly, I completely forgot about how important ESPN was in the publicizing of CSS—it took a co-worker to remind me. But I’m glad they did, because this list really would be incomplete without it. For those who are unaware, ESPN.com was one of the first major web sites to convert from tables to CSS. By switching to CSS back in 2003, ESPN.com saved around 2 terabytes of bandwidth a day. It was a highly publicized [28] move which paved the way for other large web sites to do the same.

W3.org [29]

W3.org? Yeah! Every time you need to know information about a CSS property that has yet to be written, this is where you go. When I was writing my last couple of SitePoint articles I spent a lot of time researching the "future of CSS" and logged many hours reading up on the CSS3 spec [30]. They have everything from the rotating box model [31] to the CSS3 User Interface model [32]. And really, who better to receive the latest CSS news from than the people who write it?

jQuery [33]

jQuery is everywhere these days [34], it’s totally unavoidable if you’re an up-to-date developer. It took the average CSS developer and instantly made them JavaScript gurus with its brilliant CSS selector integration, as well as giving the average run-of-the-mill JavaScript developer a great insight into the workings of advanced CSS.

jQuery is also allowing advanced CSS features (that have struggled to survive in the midst of massive browser wars) to thrive and be presented to the Web in a way that brings CSS3 into the developer’s everyday toolbox.

Section 508 [35]

Section 508 is an amendment to the Rehabilitation Act passed by the United States Congress in 1998. It’s specifically about the accessibility of electronic information to those who are disabled—the Web equivalent of putting a ramp on a building. It also helped give rise to the idea of designing in layers with Progressive Enhancement.

In the three layers of Progressive Enhancement, the second layer—presentation—is set up just for CSS. I think it’s safe to say that without amendments like Section 508, CSS would have struggled to come as far as it has in such a short time.

CSS-Discuss [36]

Okay, I’ll be the first to admit that this one is more about the mailing list, but it all starts with the web site. The CSS-Discuss mailing list takes common CSS problems and news from developers and brings them to a mass audience, so that we can all put our heads together and come up with creative solutions to problems we all run into. Even if you’re just a quiet observer of the mailing list, you can learn a lot of tips and tricks about CSS.

WestCiv [37]

Much of this list contains sites that I personally learned CSS from. StyleMaster and WestCiv played a huge role in my learning CSS, bringing advanced techniques to sites I design and develop. StyleMaster was one of the first CSS editors released for the PC and Mac operating systems. It had—and still has—many built-in CSS features that helped developers (like me) explore and test the limitations of CSS.

WestCiv also released many CSS tutorials on their site that are some of the best introductions to CSS I’ve found.

YUI CSS Library: Grids [38], Reset [39], Base [40], and Fonts [41]

The YUI team has some of the best front-end developers out there and they really outdid themselves with their CSS library. The library contains CSS reset, base, grid system, and fonts files. Developers all over the world use the CSS files developed for the YUI CSS Library. It has also paved the way for many of the most popular CSS frameworks out today.

I Love Typography [42]

Properties like position, float, and things like text-indent:-9999px are the rock stars of CSS (bear with me). With monsters like that looming about, it can be very easy for a property to get lost in the mix. I Love Typography brought many of the CSS properties into the limelight by stressing the importance of readability: line-height, letter spacing, whitespace, and font-size/family.

Chris Pederick [43]

Towards the end of my research for this article I was poking around through the features in my Web Developer Extension for ideas to round out the list, when it occurred to me that the extension itself, for me, was a huge CSS influence. The Firefox Web Developer extension [44] was developed by a guy named Chris Pederick, and it rivals extensions like Firebug [45] and Greasemonkey [46] in popularity among the developer community. This was the first extension I used to learn CSS. Chris still distributes the popular Firefox extension via his web site as well.

MySpace [47]

MySpace? Seriously? Yes, MySpace did a lot for CSS. When we talk about bringing anything into the mainstream, we have to consider beyond the mainstream web developer. MySpace brought CSS to an audience who couldn’t care less about it. The millions of people who customize their MySpace pages have all seen CSS; even if they fail to understand it, they’ve seen it. Consider this conversation:

Non-techie: So, what do you do?
Tim: I’m in web design and development, specializing in CSS.
Non-techie: What’s CSS?
Tim: You know that chunk of code you use to make your MySpace page look hideous? That’s CSS.
Non-techie: Oh yeah, okay.
I have that conversation more than I’d care to admit.

Some Last Words [48]

So, that’s my list, from CSS Zen Garden to MySpace. I can only hope that everyone reads all the descriptions rather than just scanning through, because there are some parts that I really look forward to hearing opinions on. The best part of writing an article like this is finding out what everyone has to say, including the spin-off debates it can cause. I look forward to hearing the feedback.

[1] http://www.csszengarden.com/
[2] http://www.meyerweb.com/
[3] http://meyerweb.com/eric/tools/
[4] http://meyerweb.com/eric/css/
[5] http://meyerweb.com/eric/css/edge/
[6] http://www.alistapart.com/
[7] http://www.alistapart.com/about/
[8] http://www.alistapart.com/articles/sprites
[9] http://www.alistapart.com/articles/slidingdoors/
[10] http://www.alistapart.com/articles/progressiveenhancementwithcss
[11] http://www.alistapart.com/articles/journey
[12] http://www.w3schools.com/
[13] http://www.css3.info/
[14] http://www.css3.info/about/
[15] http://positioniseverything.net/
[16] http://www.positioniseverything.net/explorer/peekaboo.html
[17] http://dezwozhere.com/links.html
[18] http://digg.com/rss_search?search=css&area=all&type=both§ion=all
[19] http://css-tricks.com/
[20] http://scriptandstyle.com/
[21] http://cssmania.com/
[22] http://cssremix.com/
[23] http://www.css-website.com/
[24] http://cssvault.com/
[25] http://www.monstertemplates.com/
[26] http://www.opensourcetemplates.org/
[27] http://espn.com/
[28] http://www.mikeindustries.com/blog/archive/2003/06/espn-interview
[29] http://www.w3.org/
[30] http://www.w3.org/TR/css3-roadmap/
[31] http://www.w3.org/TR/
[32] http://www.w3.org/TR/css3-ui/
[33] http://jquery.com/
[34] http://www.whitehouse.gov/
[35] http://www.section508.gov/
[36] http://www.css-discuss.org/
[37] http://www.westciv.com/
[38] http://developer.yahoo.com/yui/grids/
[39] http://developer.yahoo.com/yui/reset/
[40] http://developer.yahoo.com/yui/base/
[41] http://developer.yahoo.com/yui/fonts/
[42] http://www.ilovetypography.com/
[43] http://www.chrispederick.com/
[44] https://addons.mozilla.org/en-US/firefox/addon/60
[45] https://addons.mozilla.org/en-US/firefox/addon/1843
[46] https://addons.mozilla.org/en-US/firefox/addon/748
[47] http://www.myspace.com/
[48]