CSS3 Introduction

CSS stands for Cascading Style Sheets. Style Sheets are used to create the formatting and style, such as background color and layout, for markup languages like HTML and XHTML. CSS3 is the latest upcoming standard for Cascading Style Sheets. It builds on CSS2, the current standard, and adds several new features.

Many of these new features allow designers to apply advanced styles and designs to elements in a webpage using just style sheets. In the current standard, for example, an element’s borders have square edges. Designers who want to give their WebPages a softer feel with rounded borders have to resort to a tedious process of splicing and inserting images of rounded borders. Now with CSS3, the designer can create a rounded border by simply specifying it with the border property.

As of this writing CSS3 is still in development. To make the process easier, the entire standard has been divided into modules, which pertain to specific design and style features. For example, there are modules for color, selectors, fonts, template layout, animations etc. For a full list of modules and their current status check the W3C CSS3 info page here.

Each of the CSS3 modules are in varying stages of development and implementation. Some modules like those for fonts and selectors have broad implementation. The implementation for other modules like animation and 3D transforms is spottier. To add to the confusion, several browsers require the use of vendor specific prefixes. Take the transform property, for example. To get this property to work in the Firefox browser, you have to use the –moz- prefix, while Safari and Chrome require the use of the –webkit- prefix.

This tutorial covers several of the new features introduced in CSS3. If you are new to Cascading Style Sheets, it is recommended that you go to CSS2 tutorial here, to get a basic understanding of how to use Cascading Style Sheets. Once you have a basic understanding you can return to this tutorial. If you already have a basic understanding of CSS2, let’s get started.