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.

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

CSS3 Tutorials

Check Also

Website Header with HTML5 and CSS3

A Simple Website Header with HTML5 and CSS3

Would you like to see the creation process of a simple website header using just HTML5 and CSS3 - from sketch to HTML page to working prototype?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.