Separating presentation from data.

Where's a good place to find a lot of information about CSS?

• RichInStyle.com ~ I can't say enough about this site. It is essential. Everything you could want is here - tutorials & guides, tests, & more. Includes information on Netscape 6.
• Guide To Cascading Style Sheets ~ From the Web Design Group. A collection of articles and tutorials about CSS. Both a great overview and a source of in-depth information.
• The css-discuss Wiki ~ An awesome collection of short pieces on almost anything to do with CSS - and since it's a Wiki, you can add to it.
• CSS Pointers Group ~ A large and comprehensive site that goes into CSS into outrageous depth.
• Cascading Style Sheet (CSS) and Aural CSS FAQ Knowledge Base ~ As usual, the folks at irt.org have an outstanding list of questions and answers available for developers. There's not a lot of questions here, but the ones they use are good.
• House of Style ~ Highly recommended by Jans, the best Web designer I know. If Jans says it's good, it's good.

I know CSS, but I can't remember something about one item. Where can I find just straight CSS information?

• CSS Properties ~ This is a great page that simply lists all CSS properties, with information about each property's possible values. You can also get all the info on one page, suitable for printing. Very, very useful.
• CSS Attributes Reference ~ More information from Microsoft. Excellent, especially if you want to know what IE supports.

Where can I find basic information about CSS?

• Mulder's Stylesheets Tutorial ~ This is a nice tutorial that actually has quite a bit of meat to it. If you know nothing about CSS, this would be a good place to start. Another in the line of great lessons provided by Webmonkey.
• CSS Tutorial from W3Schools ~ An excellent set of tutorials about all aspects of CSS.
• Using Style Sheets ~ An excellent overview from the smart folks at BrainJar.
• Cascading Style Sheets: Separating Content from Presentation ~ Chapter one, excerpted here, explains the "foundation concepts" of CSS. A good introduction to the subject of CSS.
• Using Cascading Style Sheets ~ This is an online tutorial provided by the University of Saskatchewan. It's really an easy way to learn the basics. Take a look!
• Get Started With Cascading Style Sheets ~ A series of brief, one-page long discussions of CSS basics. From CNET.
• Ask Dr. Web About Cascading Style Sheets ~ A short yet technical introduction to CSS. Definitely worth reading.
• Web Project: Cascading Style Sheets ~ This is an article from the November 1997 issue of Byte magazine. It's not really in-depth, but it covers the basics.
• Understanding Style Sheets ~ From DevShed: "... this primer will attempt to teach you the basics of CSS - a few simple concepts, a look at style rules and definitions, and an explanation of the important properties you need to know to fully utilize the power of this technology." (Also see Part 2)

Where can I find CSS specifications?

• Cascading Style Sheets ~ The W3C's home page for all their information about CSS. There's a lot here, and it's all essential.
• Cascading Style Sheets, level 1 ~ This is the text of the W3C Recommendation, first released as a recommendation on 17 December 1996, and later revised 11 Jan 1999.
• Cascading Style Sheets, level 2 ~ The text of the W3C Recommendation, released on 12 May 1998.

I'd love to read some CSS tutorials.

• HTMLdog ~ Tutorials for CSS (and HTML), arragned by levels: beginner, intermediate, and advanced. All standards-based, and generally very clear.
• Working with CSS - Introduction to CSS Layout ~ From Apple. "In this article I'll explain why CSS is in many ways preferable to using tables for layout, and then I'll show you some CSS layout techniques using a complete re-coding of the Apple Internet Developer home page as an example."
• CSS Design: Taming Lists ~ An excellent tutorial covering the many ways you can use CSS to make your lists look great.

How can I use CSS for positioning elements on a Web page?

• Chapter 11: The Visual Model from Cascading Style Sheets: A Beginner's Guide ~ Some excerpts from the book covering the visual model & element positioning. A good overview.

How do I incorporate CSS into my Web pages?

• Linking Style Sheets to HTML ~ A clear explanation of the various ways to incorporate CSS into your Web pages. We recommend linking to an external style sheet.

Which browsers support which CSS?

• CSS Support Charts ~ "These charts detail browser support for the CSS1 specification as well as portions of CSS2 ... At the moment, the charts only cover browsers up through IE5.x, NS6.0, and Opera 4 ..." The chart will be updated sometime.
• WebReview.com's Style Sheet Reference Guide ~ This is a massive compendium listing every CSS item and "how well it is supported by Netscape 4.x and Internet Explorer 3.x, 4.x, and 5.x for both Macintosh and Windows 95, and Opera 3.6 for Windows." An excellent resource!
• NCD Style Sheet Guide ~ Broken down by category, this list details browser support for CSS.
• Style Sheet Known Issues ~ This list is provided by Netscape itself, and lists all the CSS bugs associated with with Netscape 4. There are a lot!
• CSS1 Test Suite ~ Straight from the W3C. A series of pages which test your browsers support for CSS1. Very interesting.
• CSS Bugs and Workarounds ~ A list of problems in various browsers, and the workarounds developers can use to surmount (most of the time) those problems.
• Using Stylesheets with IE5 ~ Just what it says. From the fine people at Webmonkey.

How can I validate my CSS against some standard(s)?

• W3C CSS Validation Service ~ This excellent service from the W3C checks your CSS documents for conformance to W3C standards. Absolutely essential - I use this service to validate the CSS I use at granneman.com. You can also download the validator to run on your computer or network, and it's even open source!

Are there any tools that I can use to generate CSS?

• TopStyle ~ This is an excellent environment in which to create and work with style sheets. Everything you could want is in one great package. Further, more and more HTML editors are integrating TopStyle into their programs as the default CSS editor. You can download a limited free version, or you can pay $50 for the full version. Trust us - you'll want the full version. Windows only.
• CSS Mill ~ A Web-based tool that allows you to specify the CSS you want and then generates code you can use. Basic, but it would be a good way to learn CSS. Best of all, it's free!

Does anyone have some collections or examples of CSS tips and tricks that I could look over?

• Read World Style ~ There isn't a lot here, but it's all worth reading, especially the short & concise discussion about which fonts look good on Windows, Mac, & Unix computers. Definitely worth a visit.
• Listamatic ~ "Can you take a simple list and use different Cascading Style Sheets to create radically different list options?" Freakin' awesome. Check it out.
• CSS Zen Garden ~ Wow wow wow. Different designers use CSS to radically change the design of a page, without touching the HTML underneath. This will cause inspiration & envy, in equal amounts.

I want information about a specific trick: rounding corners.

• Bullet-Proof Rounded Corners ~ Rounded corners with borders ... and it works in 9 browsers! It's quite a hack, though. But still, it's a heck of an achievement.
• Rounded corners in CSS ~ A simple method for creating rounded corners around your div's.
• Cornered XBL Example ~ Eric Meyer shows us an example of inverted rounded corners.
• Big-Quotes XBL Example ~ Eric Meyer shows us another example of rounded corner, this one far more stylized. Pretty neat!
• Rounding Tab Corners ~ Eric Meyer details how to add rounded corners to navigation tabs.

How can I spruce up my forms with CSS?

• Stylish Buttons ~ "If you're going to the trouble to control everything else, why stop when it comes to form buttons?"

Another trick: rollovers done with CSS.

• Fast rollovers, no preload needed ~ An interesting way to accomplish rollovers. One problem: all the links must be the same size. But still ...

How do I use CSS with horizontal rules?

• Colored Horizontal Rule? ~ Well, duh. It's so simple once you know it!

Are there any CSS dangers I should take into account?

• The Wrong Way to Use CSS in Page Layouts ~ "... pixel-precise layouts are anything but, especially when you consider all the custom settings users may have on their systems."

Want to suggest a Web site we've missed, or let us know about a broken link? Email & let us know!

Note: These links lead to Web sites that are not under my control. I bear no responsibility for the content of these sites.