CSS3 Tutorial

CSS3

CSS3 is the 3rd level and latest version of CSS, the stylesheet language of web used to control the styling of a website. CSS3 or CSS Level 3 is the latest version of css. CSS3 includes CSS 1, CSS 2, CSS 2.1 ( previous version of css) and CSS3 specifications. CSS3 is the third level of CSS specifications.

CSS3 is integral part of HTML5

CSS3 includes some new features, like new CSS3 selectors, rounded corners, box shadows, RGBA, HSL and HSLA colors, box sizing, Opacity, CSS3 Gradients, transitions, transformations, animations, multi-column layout, flex box, CSS grids, embedded fonts and Responsive web design . Here are the new features in CSS3.

CSS3 new Features

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

CSS3 vw and vh

CSS3 introduced some new units for width, height and font size. These units are vw, vh and vmin. Viewport width or Viewport height are related to device viewport, i.e visible screen of device to user.

How to use viewport width and viewport height?

1. 1vw = 1% of viewport width.
2. 50vw = 50% of viewport width.
3. 100vw = 100% of viewport width.
4. 1vh = 1% of viewport height.
5. 50vh = 50% of viewport height.
6. 100vh = 100% of viewport height.
7. 1vmin = 1% vw or vh, whichever is smaller.
8. 1vmax = 1% vw or vh, whichever is larger.

Use of viewport Width and Height

<style>   
.box{
    height:100vh;
}                         
h1{ 
    font-size:5vw;
}
h2{
    font-size:4vw;
}
p{    
    font-size:2vw;
}
</style>

<div class="box">
    <h1>Header 1</h1>          
    <h2>Header 2</h2>          
    <p>This is a paragraph</p>  
</div>        
           

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

CSS3 Browsers Compatibility

CSS3 Vendor Specific prefixes

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

CSS3 Prefixes

1. -webkit-
2. -moz-
3. -ms-
4. -o-

<style>
.logo{
border-radius:10px;/*For all latest Browsers*/ 

-webkit-border-radius:10px;/*For Chrome, Edge, Firefox & Safari  */ 

-moz-border-radius:10px;/*For old Firefox Browsers*/ 

-ms-border-radius:10px;/*For IE 9 and above*/ 

-o-border-radius:10px;/*For Opera 11 and above browsers*/
}  
</style>