CSS3 tutorial

CSS is a style language to control the style of HTML Markup. CSS controls the presentation layer of a webpage. CSS3 is the latest version of css, the style sheet language of web. CSS3 includes both CSS2, CSS 2.1 ( previous version of css) and CSS3 specifications. CSS3 is the third level of CSS specifications.

Some new features in CSS3 are new CSS3 selectors, rounded corners, box shadows, RGBA, HSL and HSLA colors, box sizing, Opacity, CSS3 Gradients, transitions, transformations, animations, multicolumn layout, flexbox, embedded fonts and Responsive webdesign . Here are the new features in CSS3.

As CSS is a part of HTML5 now, we have to use CSS for all style related changes. Even we can't use HTML Attributes for styling, like, align, valign, color, bgcolor etc.

CSS3 Features

CSS3 includes all specifications of CSS2, CSS2.1 and CSS3. Here are some new features in CSS3.

New Features Uses
New Selectors Better Selections of HTML Elements. CSS3 selectors
Shadows Effect Box shadow and text shadow for shadow effects. Box shadow
Rounded Corners Easily round the corners of images and block elements. Border Radius
Gradients Linear, Radial and Repeating gradients for backgrounds. CSS3 Gradients
Opacity Reduce opacity of Elements and Background colors using rbga colors. Opacity
Transitions Hover and Focus element with time and timing functions.CSS3 Transition
Transformations Rotate, Scale, Skew and Translate any object
Animations Animate any object without using flash.
Multi Column layout Create multiple columns layouts.
@font face Embedded various fonts family
@media Condition based CSS to create Responsive layouts.

Browsers Compatibility

CSS3 is supported in only html5 based browsers. IE 8 and lesser Doesn't Support CSS3 and Its Features. IE 9 Supports CSS3, but not fully.. Some features are missing. But IE10 and above, edge, chrome 4, firefox 5, safari 5.1 and above browsers supports css3. For better user experience, please use latest browsers.

Vendor Specific prefix

To Avoid cross browser compatibility of css3 based properties in latest and old browsers, user vendor specific prefix.

    border-radius:10px;            /*For all Latest Browsers*/
    -webkit-border-radius:10px;    /*For Chrome and Safari Browsers*/
    -moz-border-radius:10px;       /*For Mozilla Based Browsers*/
    -ms-border-radius:10px;        /*For IE 9 and above*/
    -o-border-radius:10px;         /*For Opera based Browsers*/