CSS Tutorial

CSS and Web Developing Mailing Lists

If you have the bandwidth, the time and the right email program, you might want to join some of these mailing lists:

Web Developer's Virtual Library: This list is crowded with very experienced and also very helpful web developers. This is for questions regarding any topic about making web sites. JavaScript, CSS, XHTML, DTDs, DOM, PHP, Design in general (Site checks, cross-browser-checks, how does it actually look).

This mailing list is for the discussion of the technical and practical aspects of web development. Novices and experts alike are welcome. This list offers help for all user levels, whether you just logged on to the Net today or have been on since the start!
CSS-Discuss.org: This List is hosted by Eric A Meyer (web guru in persona). A CSS-only list. It also runs a wiki at The css-discuss Wiki

css-discuss is meant for beginning and experienced authors both, but I'm actually more interested in helping out the beginners. CSS can seem daunting at first, and it is definitely a skill that is challenging to acquire. We all started out wondering how to do cool stuff, and perplexed by browser behavior. It's my hope that the more expert among us can help ease the transition the newcomers are making by sharing our collective experience. Of course, there's room for advanced stuff: the list is also meant to be a place for CSS veterans to share new ideas, tricks, and techniques for using CSS in interesting ways. And it's also a good venue to pass along CSS-related announcements that will be of interest to all.

Links to useful CSS-related web pages

I placed quotes directly from the sites in the boxes

W3C CSS2.1 Specs: This goes to the CSS 2.1 site at the w3.org website. I always point to that site from all my examples in this tutorial. The W3C body sets the standards, if you want to do web pages this is your first address.
QuirksMode: QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains more than 150 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the WWW for studying and defeating browser incompatibilities.
Browser CSS Implementation Test: When you start working on making your pages run smoothly on the different browsers, you will find this very handy to figure out which part of CSS is not understood by a specific browser.
Then you can either drop that feature, or try to circumvent it on that browser.

This page will test your browser's implementation of the CSS standards. It will reveal bugs which your browser may have with the CSS Specifications if any. This test page is in no way comprehensive since its main objective is to reveal bugs which can be used to hide rules or declarations from certain browsers.
Stretching DIVs according to Image Size: A tips & tricks page by the CSS guru Eric A Meyer:

As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it.

Figure 1. That's not right!
Position is everything: When you do the layout of a page, and you don't use tables, then you will find this site very helpful. It gives a lot of examples of specific layouts (two-column, three-column, headers, footers).
It also has a lot of interesting articles and demos pointing out the various bugs on the various browsers.

I'm Big John, and Holly Bergevin and I built this site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes.
Blue Robot: Another site about CSS layouts (in the layout reservoir) and tips & tricks.
There is also an important article about the FOUC bug on IE:

Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content. The unimaginative creature that I am, I call this phenomenon Flash of Unstyled Content or FOUC for short.
A List Apart: Important Site for web developers, with plenty of useful articles. Not only focused on CSS, but that makes it just more interesting, no?
One important article I want to put out to you: Sliding Doors (about how to make navigation Tabs with rounded corners out of unordered lists).

A List Apart Magazine (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
CSS Edge: This is a section of Meyerweb.com, the site run by Eric A Meyer, the CSS guru.
Here you can find info about how to get the most out of CSS.

css/edge is intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations. For all the time we've spent using CSS, most of us have barely scratched the surface of the power CSS embodies, because we've been too caught up in recreating old-style table-based design ideas and worried about support limitations. No more. Now we start digging for treasure.
The CSShark: The CSShark is a site with an interesting tutorial about CSS positioning, and some other articles.

This web site will answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
CSS font-family glossary: This is not so much about CSS, but more about Fonts. But nevertheless, an interesting reading. It will explain all those terms like Baroque, Italic, Serif and so on.
CSS 3 Selectors: Pushing to the limit: This is an article about the new upcoming CSS 3 selectors. Presently they only work with Mozilla, and not all of them. But this is CSS3 not the present standard CSS2.1.
Rounded Corners for All: Getting sick of the always rectangle boxes in CSS? Then visit this site and learn ☺

The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. Oh yeah, and to make sure they could resize while keeping their backgrounds intact. The important relevant XHTML and CSS for the first box on this page is directly below the box.
Un-colored scrollbars: From the W3C guys:

Some browsers (IE, Konqueror) have recently started supporting the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-"). But luckily you can easily disable them.
Scrollbar Wizard: Okay, if you still want to use colored scrollbars for an IE specific code, then you can do that easily with this wizard.
Slants: Okay, now I am getting heavy on you: This is about abusing (but it's still valid!) the border property to get some really interesting effects.
The Tantek site: Çelik Tantek is the CSS guru at Microsoft. He is in the W3C board for MS. He can do things with CSS that I will never 'get'. A must, even if just to look. This is heavy stuff!
He also has some good favelets, that you can put into your Favorites Toolbar for easy CSS or HTML validation, for example.
CSS/Exp: Another site that really pushes CSS. You will learn a lot from there, about how much one can really do with CSS, but beware that stuff is on the bleeding edge (just like the next link below), most stuff will not work on old browsers (like NS4.x IE6 and the like).

What's this page about? Well I decided I would also like to have a place to store my CSS experiments, instead of just deleting them after use. So I started working a bit on CSS/Exp which stands for both CSS/Experiments and CSS/Experience. It is modelled after Eric Meyers great CSS resource CSS/edge which has proven an important resource for many, with some advanced CSS design of which especially the beautitful Complex Spiral page has influenced many people's webdesign, including mine. So a small tribute there.
CSS Destroy: This is a site I frequently visit. The Literary Moose is very busy trying to push CSS over the limit, you will find a lot of useful stuff, that will only work on Opera (sometimes Moz, too), and you will find a lot of nonsense, but everything of his is work will produce some 'Ohhs' and 'Ahhhhs'.

This page collects my own experiments with Cascading Style Sheets. Normal usage of styles is omnipresent throughout my site, as it is positioned and styled exclusively with cascading watercolor arrangements. Nevertheless, I felt the need to express my moosely ideas further, beyond what is considered normal. Therefore, whatever follows, should by construction be considered abnormal. I do not intend to save the world, or present ideas with Edisonous utilitarian properties; all experiments of mine are useless from the socially optimal point of view, they serve no purpose other than maximize the objective function of at least one individual, whilst leaving all others unharmed. Accordingly, if ideas explored here strike your fancy, by all means use them to destroy your otherwise perfect and visually attractive CSS design.
CSS Boxes: This is about replacing Tables as design elements. Plenty of layout examples about different layouts. A must when you start replacing all your tables on your old pages.

This is a Problem & Workaround Set for a series of CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations.
CSS House: A cute little example of what you can do with CSS boxes and slants: A house, not constructed with images.
CSS Zen Garden: Experimental CSS Designer site, that hosts CSS style sheets that will all affect the same HTML page.
Very good to get an idea what one can do with CSS in regards of Design of a page.
This is my contribution to it: And then there was Provence

There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.