What is New in CSS3 ?

Cascading Style Sheet or CSS adds style to a webpage, for example, the fonts, colours, sizing, spacing. It describes how the HTML elements are rendered both on screen and paper. CSS3 is the latest version CSS.

CSS3 introduced new or extended features like animation, gradients, media queries, flexboxes, shadows and transforms.

Some of these features are introduced for the benefit of mobile device programming. For example, using media queries the size of screen size, resolution and orientation of the device can be determined. This will help in delivering tailored styling to tablets and smart phones. Similarly, flexboxes is a new layout mode in CSS3. Using flexboxes ensure that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

CSS3 Sample

Further on, I have experimented with some of the new “techniques” in my sample CSS code below like rounded corners, shadow, button with hover effect and even some simple animation.

Click on Run Pen to view. You can view the HTML and CSS code by clicking on HTML or CSS tabs below and you can view the output in the Result tab.

Why use CSS3?

I am using CSS3 for various things during my web development:

1. For prototyping: I usually create my first prototype using pen and paper. But then I straight away move onto a simple prototype using HTML and CSS
2. For template/theme design: Although most part of WordPress is written in PHP, it is HTML and CSS that defines the finer details (like, how I want the article date to appear)
3. For simple animations and features: I will be using CSS3 to introduce some simple features and animations. More about this in my future articles.