Introduction to CSS3 – Part 1: What Is It?

by on 6th May 2008 with 132 Comments

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

Comments & Discussion

132 Comments

Comments & Discussion

132 Comments

  1. Liret Shurn says:

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

  2. Allen says:

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

  3. 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.

  4. lotsoftime says:

    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.

  5. Dan says:

    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)

  6. Norhafidz says:

    Great tutorial my friend, I’ll definitely come here often after this. I’m new to CSS and this is just what I really need. Thanks

  7. Thinkerbelle says:

    I’ll try this on dreamweaver cs4. But I hope it works.

  8. haberler says:

    Css is making our jobs very usefuly . Thanks to this web2.0 technology.

    I will start to using css3 after 1 month.

  9. CSS3 Gallery says:

    Great article and introduction into css3, if you know of any worthy sites using css3 please feel free submit them on our new CSS3 Gallery

  10. this is very nice man i never seen this before. I am using this in my website.
    Thanks Buddy

  11. great tutorial my friend..now I have a lot of reading to do :)

  12. honour chick says:

    great info, thxs 4 sharing. ;)

  13. grandchief says:

    Good article, i try to learn about it

  14. Apnataunsa says:

    nice Article many other people doesn’t know about the CSS3 and i suggest to these peoples please read this article this is a fantastic article. thanks again

  15. I’ve been always wanted to learn CSS and this is the right place for me to start. Thankies!

  16. Always21 says:

    Thank you!

  17. Joyeria says:

    I seem to be having a bit of an issue. I’ve managed to get the tooltip to sit where I want it to in most browsers other then IE9!!!

  18. DevShack says:

    Hey nice tutorial if, was really useful. I also posts many great tutorials based on css and html visit http://devshack.info ;)

  19. JC says:

    CSS3 is coming along very nicely, thanks for the write-up. I’ve found the rest of the series good reference also!

  20. mojo706 says:

    what you wrote in 2008 is relevant now. Thank you for the series

  21. saiwa says:

    I dont know what is css3 so i went to read the section What is it but it didn t tell what is it either

  22. eldy says:

    thanks for this kind of series type post! I learned a lot here….

Leave a Comment

Subscribe
Membership
About the Author