Useful Websites and Pages
The usual caveats about things moving around on the Web apply here. I've provided the URL for each site or page that was accurate and current as this book went into production. No guarantees.
Unfortunately, much of the CSS-related content you'll find by searching the Web via your favorite search engine is likely out of date before you see it. There was a flurry of articles in 1998-1999 when CSS was new, but very few sites (our own http://www.sitepoint.com/ is one exception) have continued their CSS coverage, or ever extended beyond basics.
A List ApartA List Apart has been a cornerstone of the Web design community's online world since its inception. The brainchild of Jeffrey Zeldman, this site is chock-full of intriguing information. Zeldman shows how to do things, often by redesigning parts of his own site.
A really awesome repository of articles by many of the best designers and thinkers, this really is a list apart.
HTML Utopia – Designing Without Tableshttp://www.sitepoint.com/article.php/379
This inspirational two-parter was largely responsible for the decision to write this book, and to treat the topic of CSS the way I have. It's a nice, condensed introduction to the issues in this book, and can serve as a decent refresher when you just want to remind yourself why you're going through all this!
Style Sheet Reference Guidehttp://www.webreview.com/style/
This is the most comprehensive table of CSS compatibility analysis that I know about. It lists virtually every property and feature of CSS-1 and CSS-2, and indicates whether the feature is supported or not. The front page (which appears at the URL above) lets you select which chart you want to look at and work with.
I use this site extensively, because it's so accurate and complete that if I have any question at all about whether a particular CSS trick I'm about to try will work in most browsers, the answer is literally two or three clicks away.
The AnyBrowser Campaign Site Design Guidehttp://www.anybrowser.org/campaign/abdesign3.html
This is one of the sites I love to support and visit. It's part of the "Viewable With Any Browser" Campaign that was launched to encourage Web designers and developers to be sure that their sites actually work in all the major browsers. It encourages the use of standards, and discourages relying on browser-specific tricks and techniques.
The page has a ton of links to places where you can validate, check, and get advice about conformance with standards and specifications. It's a good place to remind yourself how best to design Web pages using CSS to ensure maximum accessibility.
glish.com: CSS Layout TechniquesA brisk, chatty overview of CSS. The best feature of this site is the list of resources it includes. Although the site has some stale links and seems not to be currently maintained (or at least not very attentively), it nonetheless offers a wealth of information you'll potentially find useful.
The Layout Reservoir - BlueRobothttp://bluerobot.com/web/layouts/default.asp
This site is primarily a code repository for two- and three-column layouts, as well as some potentially helpful information about centering things in CSS.
Little Boxes at the Noodle Incidenthttp://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
I find it helpful sometimes to sort of stumble through a series of design mishaps and blind alleys with someone who's been there and done that. This site is a bit like that. The UI is clean and well-thought-through, and each page gives you some useful information about a specific approach to a box layout design problem, how the author approached it, what worked, what didn't, and how he ultimately solved it.
CSS, cascading style sheets, HTML, Website Tips at Websitetips.comhttp://www.websitetips.com/css/index.shtml
A fine repository of links with some commentary. There are lots of sites and other references listed here that I haven't included in this appendix. It may be a good idea to pop over to this site if you need something about CSS that either you don't find in this book, or you need more examples to clarify your understanding.
Complexspiral Demohttp://www.meyerweb.com/eric/css/edge/complexspiral/demo.html
This is a sub-site of Eric Meyer's, but it deserves its own entry because it was, as far as I can tell, the first place on the Web to teach the fixed-background trick that has become de rigeur on many modern sites. It's also an attractive design, and Eric gives you all the information and code you need to adapt it to your own uses.
Accessibility Features of CSShttp://www.w3.org/TR/CSS-access
Even though the entire W3C set of CSS sites is useful (and cited later), this page, in particular, is helpful when you're dealing with an accessibility issue and want to know what, if anything, CSS can do to help you make your site more accessible. Contrasted with most W3C recommendations (which are dry, hard to read, and terse to a fault), this discussion is readable and helpful.
Eric Meyer on CSShttp://www.ericmeyeroncss.com/
This site is the supplemental/support site for Eric's book of the same title as the site. It offers errata (very helpful; some of the stuff that slipped through the cracks of the editing and production process are embarrassingly wrong) as well as some information that didn't fit into the book.
Real World StyleA very nice, cleanly designed, and helpful site by Mark Newhouse that's full of tips, insights, opinions, and other goodies. Be sure also to follow the links to his blog, where he holds forth regularly on CSS-related topics.
This is one of my favorites. I visit it often.
NYPL: Style Guidehttp://www.nypl.org/styleguide/
The esteemed New York Public Library's site, where styles and rules about the use of XHTML and CSS are linked. Every once in a while, I'll wonder about the proper way to do something (as opposed to the technically correct way) and when I do, this site has been quite useful.
W3C Recommendation for Cascading Style Sheets, level 1 W3C Recommendation for Cascading Style Sheets, level 2These are the definitive sites for explaining exactly how CSS is supposed to work. The W3C's recommendations appear here in their entirety, are searchable, and are well-organized, too. The main idea is that browser manufacturers memorize and internalize these recommendations, and then make their browsers behave correctly.
But, as a friend of mine likes to say: "In theory, there's no difference between theory and practice, but in practice, there is."
Still, it's a good idea to be familiar with the contents of these pages and to at least know your way around them.
W3C CSS Validation Servicehttp://jigsaw.w3.org/css-validator/
This is the site for the validation service I talk about in Chapter 12.
Image Overflow Trickhttp://people.opera.com/jax/buzz/css/imagepos/
A good example of the image overflow trick I demonstrate in Chapter 9, with a more fleshed-out and interesting example (hey, he had big pages to work with!).
A CSS based "Frames" simulationhttp://css.nu/exp/nf-illustration.html
The site is slightly mis-labeled. It's actually about how to use CSS to avoid the frames/tables otherwise necessary to create modern layouts. It offers some suggestions and tidbits I didn't find easily elsewhere, and it's quite entertaining.
Fancy Paragraphs With CSShttp://www.sitepoint.com/article.php/942
This article on SitePoint offers good explanations and insights into some of the topics I cover in Chapter 9. Examples are clear, large, bold and in color, so there is value in reading them even if you feel you understand the topic well.
CSS Is Easy!http://www.sitepoint.com/article.php/309
A SitePoint article that offers a quasi-interactive tutorial in CSS. You might find this useful primarily because it takes things in very small doses, and doles them out carefully.
What is Liquid Design?http://www.sitepoint.com/article.php/951
A well-organized SitePoint article that teaches the basics of using CSS and tables for liquid (aka "stretchy") design. I found its primary value to be in the clarity with which you could see the distinction between using tables and CSS for this kind of project.
Introduction to CSS Shorthandhttp://www.sitepoint.com/article.php/966
As you've learned in this book, many groups of related CSS styles have a shorthand identifier that collects all the individual properties into a single one. For example, font is shorthand for font-family, font-size, font-weight, and other, related properties.
This brief article discusses shorthand in CSS, how it develops, and how to use it properly.