CSS3

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.

CSS3 tutorial
CSS3

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. CSS3 Transform
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.

Viewport Size Font Size

CCS3 introduce some new units for font size. These units are vw, vh and vmin. Viewport width or Viewport height are related to device viewport. They even increase or decrease if browser's window size is changed.

1vw = 1% of viewport width.

1vh = 1% of viewport height.

1vmin = 1% vw or vh, whichever is smaller.

1vmax = 1% vw or vh, whichever is larger.

Use of Viewport Width and Height

Header 1

Header 2

This is a paragraph with font size 2vw.

<style>                    
h1{ 
    font-size:5vw;
}
h2{
    font-size:4vw;
}
p{    
    font-size:2vw;
}
</style>

<h1>Header 1</h1>          
<h2>Header 2</h2>          
<p>This is a paragraph</p>          
           

1vw= 13.66px if screen resolution is 1366*768

1vw= 14.4px if screen resolution is 1440*900

1vw= 3.6px if screen resolution is 360*640

1vh= 6.4px if screen resolution is 360*640

vw and vh browser support

Chrome Firefox Safari Internet Explorer Edge
34+ 19+ 7+ 10+ 12+

CSS3 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.

Chrome Firefox Safari Internet Explorer Edge
4+ 3.6+ 5.1+ 9+ 12+

Vendor Specific prefix

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



<style>
   
.logo{
border-radius:10px;            /*For all Latest Browsers*/
-webkit-border-radius:10px;    /*For Chrome & Safari */
-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*/
}
    
</style>