Top 10 New Features in CSS 3

The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design easier but it became a hot topic for a while because not all browsers supported it. However, trends change quickly in technology and all browser makers currently are implementing complete CSS 3 support. Making that process easier for the browser manufacturers is CSS 3's modularized specification, which allows them to provide support for modules incrementally without having to perform major refactoring of the browsers' codebases. The modularization concept not only makes the process of approving individual CSS 3 modules easier and faster, but it also makes documenting the spec easier.

Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You should begin making your Web pages compatible with these latest specifications. In this article, I explore 10 of the exciting new features in CSS 3, which is going to change the way developers who used CSS2 build websites.

1. CSS 3 Selectors

In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors. Using these selectors you can choose DOM elements based on their attributes. So you don't need to specify classes and IDs for every element. Instead, you can utilize the attribute field to style them.

The most useful attributes for selectors are:

• [attr^=val] –- matches a DOM element with the attribute attr and a value starting with val
• [attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix val
• [attr*=val] –- matches a DOM element with the attribute attr and a value containing the substring val

CSS

<div class="code"><style> p[title^="car"] {color: red;} img[src*="birth"] {border:3px solid green;} </style></div>

HTML

<div class="code"><img src="happy_birthdays.jpg" /> <p title="container">I am displaying a container. And this attribute won't match me. </p> <p title="carousel">This carousel will match</p></div>

Output

Figure 1. CSS 3 Selectors

Apparently, the new CSS 3 selectors make styling different elements on a webpage pretty easy.

2. CSS 3 Rounded Corners

Rounded corner elements can spruce up a website, but creating a rounded corner requires a designer to write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore because any change in content can break them.

CSS 3 addresses this problem by introducing the border-radius property, which gives you the same rounded-corner effect and you don't have to write all the code. Here are examples for displaying rounded corners in different places of a website.

CSS

<div class="code"> .box{ border: 2px solid orange; border-radius : 25px; width: 100px; padding: 10px; text-align:center; }</div>

HTML

<div class="code"><div class="box">Submit</div></div>

Output

With the introduction of rounded corners, CSS 3 eliminates the need for including external images or using any sort of JavaScript code to position the images. All you need is the border-radius property.

3. CSS 3 Border Image

Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property border-image allows you to specify an image to display instead of a plain solid-colored border.

CSS

<div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round round; border-width: 10px;}</div>

HTML

<div class="code"><div id="col">my content</div></div>

4. CSS 3 Box Shadow

A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a repeated image around the element. However, with the property box-shadow this can be achieved by writing a single line of CSS code.

After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C added it back in the last working draft.

CSS

<div class="code">.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div>

HTML

<div class="code"><div class="shadow"> my content </div></div>

Output

5. CSS 3 Text Shadow

The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it. A similar property called box-shadow is also available in CSS 3.

CSS

<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>

HTML

<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>

Output

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both