What is CSS3? Why CSS3 is used? How to use CSS3?

If you already know what CSS is, then you must have heard about CSS3. Are you wondering what is CSS3 and why CSS3 is used and how to use CSS3? In this article, I am going to introduce you to basic concepts of CSS3.

If you do not know what CSS is, then I suggest you read my article on CSS.

What is CSS3?

CSS3 is an extended or enhanced version of CSS2 (the current version) and it is the latest standard used in defining the styles for the different elements of a web page and even more. This includes animating the elements of a web page, applying different effects such as gradients, shadows and many more. CSS3 is backward compatible. This means that your existing CSS2 styles will remain the same and can be used as is, without any changes.

Basically, CSS3 is split up into “modules” to enhance the web page. Some of the most important CSS3 modules are:

• Animations
• Backgrounds and Borders
• Selectors
• Box Model
• 2D/3D Transformations
• Text Effects
• User Interface
• Multiple Column Layout

Why CSS3 is used?

The features, convenience & ease of usage provided by CSS3 are the main advantages. It lets you make the elements of a web page more dynamic, add life with a decorative touch. For example, before CSS3 to create rounded corners it was mandatory to make use of images and then write more code, both in CSS and HTML to align them as needed. But with introduction of CSS3, it is just a matter of 1-3 lines of code to provide rounded corners without ever using images! Hope this gives you an idea of the raw power of CSS3.

The scope of CSS3 is not limited to just rounded corners. Many other features such as animations, drop shadows, bevel effects, multiple background, gradients, opacity, embedding custom web fonts, etc. are introduced that remove the need to use another piece of software to achieve the same effect. These features can now be achieved by writing very simple and small code in CSS3!

All these features combined,  make the web page and its content load faster and accurate. Because CSS loads simultaneously with page loading as it is embedded in the web page, there wont be any additional time consumption. For example, without CSS3, to give a rounded corners to a div, images are used. Individual images or sprites could be used for the rounded corners. This means that at the minimum, at least 1 images must be used and can go up to 4 images, depending upon the method chosen to implement these rounded corners. But with CSS3, just 1 line of CSS3 code is enough. To extend this behavior to support other browsers couple of additional lines will be needed. So all in all, CSS3 is a huge time saver and helps load web page faster.

How to use CSS3?

There is no change in how you write CSS. The syntax and rule are same. Only declarations will vary.

Here are new CSS3 tricks and their effects:

Rounded Corners to a div:

div
{
border: 2px solid red;
border-radius: 10px;
-moz-border-radius: 10px;
}

Box Shadow:

div
{
box-shadow: 5px 5px 2px #333;
}

Stretch background image to fill content area:

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

Multiple background images for a div:

body
{
background-image:url(img_1.jpg), url(img_2.png);
}

Shadow Effect to text:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Word Wrap:

p
{
word-wrap: break-word;
}

Embedding Custom Font:

@font-face
{
font-family: MyCustomFont;
src: url('Some_Custom_font.ttf'),
url('Some_Custom_font.eot');
}

h1
{
font-family: MyCustomFont;
}

The above are some of the common and most used effects. There are many other new features and tricks that can be done using CSS3. This will be the scope of another article, on another day.

That’s it!

Hope this article was able to explain to you what is CSS3 and why CSS3 is used and how to use CSS3. Do you know of any other CSS3 effects that you would like to share? Please feel free to do so by commenting below.