Introduction to CSS3 - Part 1: What is it?

Written by David Appleyard, On 6th May 2008.
Filed in Articles, CSS.

This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. We will be starting from the very beginning - taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces - with new ones also added. Some of these modules include:

The Box Model
Lists Module
Hyperlink Presentation
Speech Module
Backgrounds and Borders
Text Effects
Multi-Column Layout

View the full list of modules

Timescale

Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.

It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 - some new builds of Safari have already started to.

New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.

How will CSS3 affect me?

Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work - web browsers will always continue to support CSS2.

The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).

Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.

Other posts in the series

Tags: basics, CSS, css3, introduction, proposal

Liret Shurn says:

May 7, 2008 at 1:09 am

Great introduction - looking forward to the rest of the series and learning more about css3!

Allen says:

June 3, 2008 at 9:37 am

Great Series. It looks exciting. When will you be able to use css3, or can you already use it?

David Appleyard says:

June 3, 2008 at 12:22 pm

You can use it with the latest browsers, but not many of the various modules have been implemented in a consistent way yet. It will take several months, if not a year or two, before it becomes a new standard.

lotsoftime says:

June 6, 2008 at 7:56 pm

I have so much time on my hands I think I will start learning about a standard that won’t come out for another couple of years.

Dan says:

June 19, 2008 at 4:50 pm

I’m trying to rebirth my (left brain) tech head into a (right brain) design type of guy (if that’s possible!) and just one of the aspects of css3 I’m looking forward to is rounding off div corners without the need for extra graphics. (I’m certainly not a finicky graphics guy YET)

20 Useful Resources for Learning about CSS3 says: