Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is carefully curated and edited by Josh Johnson and David Appleyard.
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.
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.
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:
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.
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.
Tags: basics, CSS, css3, introduction, proposal
Copyright © Design Shack 2005-2010 | Back to Top
Great introduction – looking forward to the rest of the series and learning more about css3!
Great Series. It looks exciting. When will you be able to use css3, or can you already use it?
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.
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.
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)
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
I’ll try this on dreamweaver cs4. But I hope it works.
Css is making our jobs very usefuly . Thanks to this web2.0 technology.
I will start to using css3 after 1 month.
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
this is very nice man i never seen this before. I am using this in my website.
Thanks Buddy
great tutorial my friend..now I have a lot of reading to do :)
Thank you so much! :)
great info, thxs 4 sharing. ;)