Introduction to CSS3
CSS, together with HTML, is the very foundation of the Web. While for a Web developer CSS might come secondary because it does next to nothing but make pages look pretty, if you care about how your site looks, then you can’t go without (at least) a working knowledge of CSS. Mastering CSS is really a hard job but getting a basic idea of it isn’t. This tutorial is aimed exactly at this – to give you an idea about the most important concepts in CSS3, the latest version of the CSS standard.
What Is CSS3?
CSS3, as the name itself implies, is the successor of CSS2.1. Similarly to the way HTML5 relates to HTML4, CSS3 uses the same foundation present in CSS2 but adds new features in the form of a new combinator, new selectors, new pseudo-elements, and new style properties and values in order to respond to the changed Web landscape and/or to give more power to designers to style their sites.
In addition to the new combinator, new selectors, new pseudo-elements, and new style properties and values the most important of which will be explained later in the tutorial, two other major differences between CSS2 and CSS3 are that CSS3 is modular and offers much better browser support.
The Modularity Concept of CSS3
Unlike its predecessor, CSS3 is not a single document you can read from start to finish. Instead, it’s divided into multiple documents, called modules. Each module deals with a given functionality only, such as colors, namespaces, selectors, tables, lists, templates, basic boxes, etc. Each module has a different status of acceptance – some are still in a Working Draft status, while others are in a Last Call status, or in a Candidate Recommendation status, and a few are in the highest status of readiness, called Recommendation.
This all might sound very complicated at first but it isn’t. If a given module has a Recommendation status, this means it’s very safe to use it because it’s complete. If it is in a Candidate Recommendation status, it might be stable but it might be still under testing, so in a sense you can use it but at your own risk because changes to the specification might happen. Last Call and especially Working Draft modules are still far from stable, though you can use them but you need to be prepared to make frequent changes to your code, if the modules get revised (of course, the revisions might not be that drastic but you need to be aware that this is an alpha version of the specification).
CSS3 Supports Many More Browsers
The second biggest difference between CSS2 and CSS3 – and it’s a nice one – is that CSS3 supports many more browsers. Also, many more CSS3 features work the same way in different major browsers and their relatively new versions. While you can’t say cross browser issues are a thing of the past (yep, you still need to test your code in different browsers and in different versions of them), with CSS3 this is becoming less of a problem.
If you are eager to read more about pseudo-classes, here they are listed all.
Read more >>