Introduction to Css3

May 02, 2012, by admin

CSS stands for Cascading Style Sheets. Style Sheets are used to produce 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 includes quite a few new attributes.

Many of these new attributes 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 build 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 completion. Some modules like those for fonts and selectors have broad completion. The completion for other modules like animation and 3D transforms is spottier. To add to the uncertainty, several browsers need the use of vendor exact 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 aspects 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.