This page used to contain a list of links to various CSS-related resources. Because of many changes to basic CSS techniques and methods since it was first built in 2003, the former list has been retired. Instead, here are other resources that offer a wide variety of modern tips and inspiration.

For a while now, I’ve had a dream. My work in the last 8 or 9 years has been heavily focused around education, whether I’ve been commissioning and editing technical books to help people create cool stuff with technology, training new employees at the various companies I’ve worked for, or editing and writing tutorial articles to help people use Opera’s software. I am passionate about the Web too, and a big believer in open web standards. I wanted to do my bit to help make the Web a better place, and I think this comes back to education, whether that’s teaching people how to collaborate and have more respect for one another, or teaching them how to make their web sites work across platforms and devices, and be accessible to people with disabilities. Web standards are key to the latter, so I decided to try putting my time and energy into something that would help increase the adoption of web standards on the Web today and in the future. It has been floating around my head for a while now, but it has finally come to fruition at Opera—many thanks to my wonderful employers for paying me to do this! One of my dreams has finally been realised.

So in this article I introduce to you the product of a lot of hard work over the last several months (by myself and a lot of other people)—the Web Standards Curriculum, a course designed to give anyone a solid grounding in web design/development, no matter who they are—it is completely free to use, accessible, and assumes no previous knowledge. I am mainly aiming this at universities, as I believe the standards of education in web standards to be somewhat lacking at many universities. I’ve heard tales of students being marked down for using web standards in their coursework, because the marking schemes are so outdated; I’ve also heard tales of employers despairing because when they interview university graduates for web–related positions, they find out that the graduates really don’t have a clue about real world web development. If you’re at a progressive university that does teach web standards in a reasonable fashion, then I tip my hat to you—get in touch!

Are you looking for a basic understanding of how UIs are created on the web or who wants to brush up outdated UI development knowledge? Or maybe you'd like to learn more about the medium you're designing for and gain basic tools for prototyping designs? Do you want a better understanding of the web and how Google makes the pages that are its face to the world? If so, "HTML, CSS, and JavaScript from the Ground Up" is for you.

Welcome to HTML Dog, the web designer's resource for everything HTML and CSS, the most common technologies used in making web pages.

Welcome to our Complete CSS Guide.

This Guide is a reference to all of CSS 2.1, the W3C recommended standard for web page appearance, as of July 2008. We will also cover some aspects of CSS 3, currently a work in progress.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Gradients are presently only supported in Safari 4 and Chrome (webkit) and Firefox 3.6. In webkit they can be used anywhere an image can be - for example background-image, list-style-image, border-image or with generated content. In Firefox they can only be used as background images.

Note webkit based browsers and Firefox have very different syntax for gradients.

If you specify a gradient as a background, be sure to also specify a background color, to ensure text is legible in browsers which don't support gradients.

Gradients can be linear or radial (this editor creates linear gradients for webkit browsers). In webkit they require a start and stop position and color, and may also take one or more color stops, which specify a color and position. Enjoy playing with gradients!

You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match, that's all done automagically for you.

Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet.