What is the Differences Between CSS & CSS3 ?

Cascading Style Sheets, known as “CSS,” is a Web design language that is used to control the look and feel of Web pages. CSS files are created separate from the Web pages during the design process making them highly flexible. Once a Web page has been set up, a designer simply changes the CSS files without touching the main HML code. Since the official launch of the first CSS specification, this markup language has undergone numerous modifications and changes. CSS3 now comes with many more features and supports a rich interface and extra functionality.

Modules

• Modules are a new concept in CSS3 that allow the CSS specification to be split down into groups of features. This architecture has meant that CSS3 can start rolling with very few new features and as it matures, more features are added as modules, similar to the agile development method used in software development. This iterative and incremental development has meant that CSS3 is more flexible compared to its predecessors.

Multiple Backgrounds

• With CSS, having multiple backgrounds would have required using a number of HTML tags and div tags to render them on a Web page. With CSS3, the new and improved “background-image” property allows the lying of image layouts on top of each other by declaring as shown in the sample code:

  Background-image: URL(pic1.jpg), URL(pic2.jpg, URL(pic3.jpg);

• Sponsored Links

  • Create Website TemplatesFree Site Builder, Templates & 3rd Party Scripts. View Details Here!

    www.HostGator.com

Text Shadowing

• Special effects in CSS required that the text be first rendered in image-editing software and then linked to a Web page using the “<img>” tag. The “text shadow” property in CSS3 now allows text features like a blurred text shadow effect to be added using one tag. This code shows how this is done:

  Text-shadow: 1px 4px 6px #33333;

  The third value, “6px,” controls the blur effect while the first two values control the shadow drop direction.

Opacity

• With CSS, you needed to use various hacks to produce the opacity effect. With CSS3 new opacity feature, this is now done in one step as shown by the code:

  #my_id {

  Background: #F11;

  Opacity: 1;

  }

Border Radius

• Developers use a few lines of code to have rounded corners without the need to use the older CSS method of importing new libraries and making images for each corner. This code shows how it is done in CSS3:

  #id {

  Height: 50px;

  Width: 50px

  Border: 2px solid #F00;

  }