CSS Introduction

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. There are a few versions of CSS in use today: CSS is the most firmly established and the newer, more robust CSS3 is gaining steam and browser support.
CSS is a styling language not a programming language, which means it is a system for changing the appearance and styling of an almost all elements in a document.

Advantages of CSS

Time Saving: You can write single CSS file and use it in as many time as you want by simply adding to html document.

Faster Load: With the help of CSS you can reduce unnecessary HTML tags so as a result the webpage load faster.

Easy To Maintain: If you write global CSS file that is a CSS file for all HTML files you can edit that single file and changes will occur in all html pages.

Multiple Device Capability’s has the ability to display the almost same styling on different types of devices.

CSS3 Introduction

CSS3 is the latest version of CSS with all new features and. It is completely compatible with previous versions of CSS.

CSS3 is compatible with almost all modern browsers

Many New Features are introduced in CSS3 some of them are:

CSS3 Border: The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Like this:
p.one { border-style: solid;
border-width: 5px;
}
CSS3 Backgrounds:- Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.
div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
CSS3 Gradients:- CSS3 gradients let you display smooth transitions between two or more specified colors. #grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
CSS3 Transform:- CSS3 allows you to format your elements using 3D transforms.
div {
-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg);
}
CSS3 Animation:- CSS3 animations can replace animations created by Flash and JavaScript in existing web pages.
div {
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
CSS3 Effects:- CSS3 contains several new text features.
text-shadow: h1 {
text-shadow: 5px 5px 5px #FF0000;
}
word-wrap: p {
word-wrap: break-word;
}
Fonts:- In the CSS3 @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
@font-face {
Font-family: myFirstFont;
Src: url (sansation_light.woff);
}

Div {
Font-family: myFirstFont;
}

And many more.