What are the major differences between CSS, CSS2 and CSS3?

[siddhantkapoors]

What are the major differences between Cascading Style Sheets, CSS2 and CSS3?

[Christopher]

The latest version of CSS is the CSS3 version which basically differs from CSS2 in the incorporation of Modules and other changes. Modules enable the designing to be done in a lesser time with more ease while updating individual features and specifications. The CSS3 version supports many more browsers than CSS2, but be sure to test it on all operating systems and browsers.
Other major changes/additions include:

* New Combinator
* New CSS Selectors
* New Pseudo-elements
* New Style properties

Now let us discuss these in detail.

Combinator
New addition of General Sibling Combinator is done to match sibling elements of a given element through tilde (~) Combinator.

CSS Selectors
While CSS2 had ‘simple selectors’, the new version calls them the components as ‘a sequence of simple selectors’.

Pseudo-Elements
Many Pseudo Elements have been added that allow in-depth yet easy styling and a new convention of double colons ‘::’ has been introduced.

Style Properties

New Background Style Properties
Multiple Background images can be layered in the box using different elements like background image, position and repeat.

Border Style
Styling of borders has been extended to images and rounded designs which includes creating image of the borders and then automatically apply image to the borders through CSS.

Additions in Properties

* Border-radius, image-source, image-slice, and the values for width outset and stretch have been added in CSS3.
* Properties for managing boxes like shadowing, wrapping and breaking have been added.
* CSS3 has done away with complex structures for div tag and makes it easy for hassle free designing of multiple table-less columns. This can be simply done by putting in the number of columns in the browser that need to be added in the body element along with their width, color and height to make the text flow through the columns with ease.

New Background Style Properties

* With the addition of the new ‘local’ value, if the element has a scroll bar then the background scrolls with its content.
* Background-clip, origin, size and style properties have been added.
* Background shorthand property has been added in the size and origin properties.
* The changes to previous Background Style Properties include:

Repeat property now has two values name space and round that space the tiled image in the box uniformly and rescales background images to tile it multiple time in the box.