Introduction
The first thing you need to know is that Cascading Style Sheets 3 – CSS3 is the latest standard for CSS. And, CSS3 is backward-compatible with earlier versions of CSS.
The biggest difference is that CSS3 has been split into different “modules”. It contains the old CSS specification and new modules also.
In CSS2 your styles were in a single document with all the Cascading Style Sheets information within it, but in CSS3 they are broken into smaller, individual pieces. CSS3 also addresses mobile development and responsive web design.
The most important Cascading Style Sheets 3 – CSS3 modules are:
Selectors in Cascading Style Sheets 3 – CSS3:
Allows developers to edit elements by name, class, type, attribute, and more.
Box Model:
Box Model is an approach to creating consistency between HTML elements on a page by applying margins, borders, and padding to a box’s content, developers can clear the area around an element, give it borders, and more.
Backgrounds and Borders in Cascading Style Sheets 3 – CSS3:
Developers have better control of element borders and page backgrounds. CSS3 also enables rounded corners on boxes and drop shadows. Before CSS3, backgrounds had to be achieved with images, which added to a page’s file size and load time.
Image Values and Replaced Content:
Images can have corners, an effect that required a lot of formatting and Photoshop work to achieve before.
Text Effects:
CSS3 allows for great new features such as shadow effects, text-overflow (this allows a developer to hide text that gets too long for its element), word breaking (automatically breaking text so it fits within a box), and text wrapping–all things that save designers lots of formatting time.
2D/3D Transformations:
Allow elements on a page to rotate, grow, shrink, flip, or translate into a different color.
Animations:
For the first time, elements created in CSS can move on screen without requiring any JavaScript or Flash code. With transitions, an element can seamlessly change size and color. You can set a duration for a transition, e.g. creating a button that slowly expands and changes color when you mouse over it.
