What's new in CSS3

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. 

CSS provide wide range of features to control the look and feel of the web pages without even touching main HTML design. The standards for CSS are developed by World Wide Web consortium also known as W3C. That makes a CSS a universal web styling language with consistent syntaxes with improved cross browser compatibility. Most importantly CSS file can be totally separated from the main HTML design as well as it can be embedded with it. Most of the popular web designing tools including Adobe Dreamweaver support CSS by its default configuration. In order to cope up with the modern demands of we design CSS has evolved drastically with in past few years. As a significant result of that improvement the CSS3 standards are developing by W3C.

Round Corners

As there are much new features, the simplest and easily useable one is that the rounded corners. The before CSS2 did not allowed users to make this available in one step. They had to attach four circular images for the four boundaries of the div and make the border rounder. The “-moz-border-radius” and “-webkit-border-radius” properties enable the users to be those boundaries round. 

Background Effects

The background decoration is available with the possibility of customizing it. ‘background-origin’ and ‘background-clip’ gives a customized display for the content background. It has also enabled to have multiple backgrounds to the same content through the CSS3 styles. In addition, there is a new feature which is called background-image-size to resize the size of the background image of the divs.

Color Pallet

There is a huge variety of colors available with the new CSS edition. HSL, HSLA and RGBA are the new color schemes. The new ‘A’ value stands for the opacity. With this value, the divs can make transparent and give a much attractive look to the appearance. In early editions, the transparency was obtained by adding a .png or .gif image as the background.

Text Decoration

Most of the occasions when it is need to add customized text effects such like the shadow; the designers used graphics made using the Photoshop like software. With the latest edition of the CSS, it can be done without adding a weighted image to the content. The ‘text-shadow’ property comes with making them possible and providing a better image than the CSS. Text overflow control has made it easy to give good boundaries to the content while having the two values which are ‘ellipsis’ and ‘clip’. ‘Word wrap can be used to mark the boundaries of a particular text area while giving the options to mark the boundaries even by the number of letters or words.

Attribute Matching

Attribute matching made the styles available for some tags which are named with some starting part of a string. For example, the ids’ which are named as ‘sosa’ and ‘sopa’ can be easily applied with styles by making the tag name starting value as ‘so’. The outline property can be used to make an outline for the content. In earlydays, it was done by having two separate divs and applying the border to the outer one in which the width and height values greater than the inner one.

Box Model

Box model is a new property which was introduced with the CSS3 edition. With this, it can be easily assigned with customized div appearance. There should be two inner divs and a single outer div with the width of each inner div being 50%.

Web Fonts

A new collection of web fonts was introduced with the CSS3 edition. The multi column layout view also can be applied to the content as it can be used to provide multi column paragraphs. Media boxes are also a new implementation that could help to give a good view to the end user.