Learn web standards
Links
There are more and more places where you can learn about CSS available every day on the web. Here, we've gathered together some of the best of what we've seen, so if you don't find what you're looking for at the House of Style, we certainly hope you find it here.
We've gathered the links into a number of categories.
- Comprehensive information
- Tutorials and guides
- Interesting articles
- Browser support info
- Interesting CSS examples
- Online tools
- Resources in languages other than English
Comprehensive information
All these sites have a whole range of CSS resources: specifications and guides, tutorials, examples, browser support info and all manner of help.
The W3C
Cascading style sheets are an initiative of the World Wide Web Consortium (W3C), so where else to learn more about style sheets? Here you'll find
- the latest version of the CSS specification
- latest news about tools, browsers, and resources
- the W3C core style sheets - CSS templates you can use as a starting point for your own work
- a CSS validator
Keep coming back to stay in touch with all the latest developments and new directions in CSS.
Jeffrey Zeldman
Amongst many many other things, Jeffrey Zeldman
- maintains a Blog, the Daily Report, that is a great place to keep up with CSS and web standards generally
- writes lots of articles on CSS and standards based web design issues
- is responsible for AListApart, another great repository of CSS articles and tutorials
Other high fives
If you're looking for links to standards based web development resources generally it's hard to go past Web Design References, and their collection of CSS links is comprehensive, well organised and up to date.
CSS-Help is a great guide to every aspect of the specification.
The CSS Pointers Group are just about the bees knees when it comes to resources, as well as links to other stuff online. If you haven't found what you're looking for here, get yourself over there now! Includes a listing of CSS FAQs
Index DOT Css is a great guide to all the CSS selectors, properties and other features.
Accessify.com is an excellent resource for up to date help for designing accessible websites generally, and the use of CSS specifically. The articles page is particularly useful.
Do take a look at The Fixor's CSS Style Sheet Resources as well - nicely organised into useful categories such as doctypes, printing, links, lists and so on.
Web-Building has another great listing of further CSS resources.
Tutorials and guides
- Webucator provides customized onsite CSS training and HTML training using Style Master CSS editor.
- Sitepoint has an up to date collection of tutorials and how-tos, including sample chapters of Dan Shafer's book, HTML Utopia: Designing Without Tables Using CSS.
- Sizzling HTML Jalfrezi - a comprehensive tutorial on the basics of creating a style sheet and linking it to your site - includes and FAQ
- The WDG CSS tutorial works through basic CSS syntax, properties, linking to web pages and also how to make sure your pages are accessible to browsers that don't support CSS so well.
- Here's a great CSS for page layout tutorial from the guys at Digital Web
- Lance Arthur of GlassDog fame has a CSS tutorial at his very beautiful looking site.
- Builder.com has a number of short CSS tutorials for specific effects, such as adding a watermark to a page.
- The Web Worker's ToolBox has a very comprehensive CSS Tutorial including real-code examples of all the properties.
- The HTML Writer's Guild has an extensive CSS FAQ.
- WebMonkey have both a CSS Reference as well as a collection of CSS How-to's.
- The CodeStyle CSS Style Guide is a collection of CSS tutorials with a particular emphasis on using CSS to target different media.
- Your HTML Source has a basic introduction to CSS and then a whole lot of CSS How-tos.
- The Hard Coder CSS tutorial includes information on applying inline style.
- The Devshed CSS tutorial takes a step by step approach to creating a simple style sheet and linking it to your site.
- The Quadzilla CSS Tutorial, now hosted at WDL, takes an easy to understand, straightforward look at CSS basics.
- This no nonsense tutorial has a particular emphasis on looking after browsers that aren't so CSS-savvy, as well as those that are.
- The Webreference CSS pages include a number of articles helping you solve particular CSS problems. They also have a number of pages with specific reference to CSS layouts.
- Jan C.H. Weijers has a comprehensive guide to style sheets that covers the whole specification.
- W3Schools have an extensive CSS section, including the interactive CSS examples exercise, where you get to edit the CSS and see the results immediately, and a quiz.
- This CSS reference covers all of CSS, including introductory materials and help for making style sheets work in older browsers.
- Elated have a collection of CSS tutorials which they grade into beginner, intermediate and advanced
- WDVL has a large collection of CSS tutorials and how-tos from basics to advanced
Interesting articles
There are lots of articles about various aspects of CSS to be found at the places we link to above. We privilege these ones here because of their unique perspective, their incite, or just the fact that they're written by a friend of ours.
- What's wrong with the FONT element? - a great little explanation, written in 1996, but just as relevant today, as evidenced by the popularity of the page. Read this before you use the font element even one more time.
- Effective use of style sheets is a Jakob Nielsen Alertbox classic. Lots of other interesting articles on CSS and web usability can also be found at useit.com.
- Jan Roland Eriksson's Typographical measurement systems is a fascinating page which links together traditional typesetting ideas, terminology and so on with CSS. If you don't know much about words like "leading" and "x-height" this is a great place to start.
- The CSS Anarchist's Cookbook, like all things by Eric Meyer, is both amusing and edifying. A helpful approaching to replacing all your old non-standard HTML with CSS.
Browser support info
Our browser support tables are pretty good, but sometimes you're going to want to look at from someone else's point of view. Here are some of the finest.
- The Index DOT Css browser support tables look from a slightly different perspective than is usually the case: they look at the different browsers in terms of which version they first supported each property or selector.
- You won't find this anywhere else: MacEdition has a comprehensive guide to CSS support in various versions of the Mac-only browsers, Safari, OmniWeb and iCab.
- IE 5 Mac: Miscellaneous bugs has what the title would suggest, but it also has some good suggestions for workarounds that it can otherwise take you a lifetime to work out for yourself
- Take a look at Matthew Haughey's Little Shop of CSS Horrors, which ventures into "the darker side of CSS rendering" - mainly problems with version 4 browsers.
Interesting CSS examples
- The CSS Zen Garden is a great resource for help with CSS page layout - and beautiful to look at as well: you get to choose your own layout for how you would like the info to be displayed. Cool - check it out.
- Chris Croome's pages: have some fun experimenting with the different style sheets he makes available.
Online tools
You can validate your CSS at any of the following
As well, the following can be helpful at various stages of the CSS design process.
- The Back To Font Web Color Picker is cool - use it to try out CSS color schemes before you even write a line of code.
Resources in languages other than English
Chinese
Japanese
Spanish
Italian
- fucinaweb is a site with articles and resources to help people build web sites that cleverly use the standards, and are usable and are accessible
- .Constile is entirely devoted to CSS: tutorials, articles and help all in Italian. A great resource.
- HTML.it have a really comprehensive Italian CSS tutorial, along with an FAQ which is also in Italian.
Russian
Here is an extensive CSS tutorial in Russian