CSS consist of various levels or versions which are CSS1, CSS2, CSS2.1 and CSS3. Each of these versions is a latest addition to the previous level with some additional features. The latest version of CSS3 is different from its previous version of CSS2.1 in the sense that CSS3 consists of different sections called modules. These modules separately pave their own way through WC3 at different levels of recommendation process; whereas, CSS2.1 was submitted as a whole document containing all the Cascading Style Sheet information. The browser thus, easily supports these CSS3 modules as it can work on each module separately.
It can be said that the modularization in CSS3 has extended the features of CSS2.1 and has improved its backward compatibility. Also the new version of CSS3 serves compatibility to more browsers as compared to its previous counterpart.
Apart from the above basic differences, CSS3 possesses a lot of differences from its previous version which are:
New Selectors
The new selectors of CSS3 enable you to write rules in different ways along with new pseudo-elements and combinators. There are three new attribute selectors:
- Attribute beginning that matches exactly and has an element called foo that begins with bar i.e. <element foo=”barn”>
- Attribute ending that matches exactly and has an element foo that ends with bar i.e. <element foo=”rebar”>
- The third one is attribute that contains the match i.e. <element foo=”rebaring”>
In addition to these new selectors, there are 16 new pseudo-classes added in the new CSS3 version. Also there is an addition of new combinatory where the element matches when element B follows element A after sometime.
New Style Properties
There is no such difference in the box model of these two versions however, there are several new style properties that can be used creatively to alter or design your boxes borders and backgrounds. Following are the new style properties that you can find in CSS3 version:
Background Styles
- Multiple Backgrounds: You can layer multiple background images on eachother using background repeat-styles, background images and their positions.
- New Background Styles: These include background clip which can clip the image; background origin that determines where should the background be placed; and the background size which helps to determine the image size.
- Changes to existing backgrounds: The changes to existing background properties are background repeat, background attachment and background shorthand property.
Border Style Properties
The new version of CSS3 can create rounded corners and also border images which are an interesting addition. Other border style properties alterations include border image source, border radius, border image width, stretch and many more such extras.
Some other Additional Properties
There are many more additional things introduced in CSS3 which did not exist in CSS2.1.
- Like the improved user interface gives you new cursors, enables elements to resize, provide required fields and give response to actions.
- The Ruby Module supports the languages that annotate documents using textual ruby.
- The Media Queries is a blessed feature since it enables you to define the usage of style sheets effectively. Therefore, it gives more flexible room to the user to give its command upon a certain styling task.
- The Paged Media Module gives better support to the CSS3 paged media.
- The new version can generate content programmatically for headers, footers, footnotes etc.
- Other general modules include color module having opacity and text module that create drop shadows and also outline text.
- The template layout and grid modules enables to adjust grid positioning by creating grids in CSS.
Hence this was a basic overview of various properties that have been added to the CSS2.1 version of CSS and introduced the new version of CSS3 with some additional features.
