CSS3 Series Part 1: Introduction, Features and Use of CSS3

Journey with CSS3

 

Welcome to the CSS3 series where we'll discuss the many new things we can do to enhance the look and feel of a web page.

 

This entire journey will consist of the following parts:

1. CSS3 Series Part 1: Introduction, Features, and Usage of CSS3 
2. CSS3 Series Part 2: Playing with Background.
3. CSS3 Series Part 3: Multi-column Layout. 
4. CSS3 Series Part 4: Playing with Border.
5. CSS3 Series Part 5: Playing with Gradients.
6. CSS3 Series Part 6: 2D Transformation with CSS3. 
7. CSS3 Series Part 7: 3D Transformation with CSS3.
8. CSS3 Series Part 8: Animation with CSS3.
9. CSS3 Series Part 9: Transitions with CSS3.

CSS3 Series Part 1: Introduction, Features, and Usage of CSS3

 

 

Before diving into CSS3 let's have a little look at what CSS is. CSS is nothing but a style language that describes how HTML markup is presented or styled.

 

CSS has various levels and profiles and is denoted as CSS1, CSS2 CSS3 and so on.

 

The first CSS level (CSS1) was published on December 17, 1996, and the following features were supported by this level.

• Font Properties.
• Color of text, backgrounds, and other elements.
• Alignment of text, images, and other elements.
• Margin, border, padding and positioning of elements.

The second level (CSS2) was published in May 1998 by W3C. This level of CSS had new features like:

• Absolute positioning.
• Relative and fixed positioning.
• Z-index.
• Shadowing.

CSS3 was developed to make web design easier. CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2. Some of the most important CSS3 modules are:

• Selectors
• Box Model
• Backgrounds and Borders
• Animation
• User Interface

Many features are available in CSS3, some of them are the following.

• Border Image
• Border Radius
• Box Shadow
• Multiple Backgrounds
• Text Shadow
• Multi-column layouts
• CSS3 Transitions
• Word Wrap
• Box Resizing
• Transformation and so on.

Browser specific prefixes for CSS3

 

Prefix	Browsers
-webkit-	Google Chrome
-moz-	Firefox
-ms-	Internet Explorer
-o-	Opera
-webkit-	Safari

 

Let's see an example of using these prefixes that can work with various browsers.

<style>
#repeatedImageBorder {-webkit-border-image: url(banner2.jpg) 30 30 round; /* Google Chrome*/
    -ms-border-image: url(banner2.jpg) 30 30 round; /* IE */
    -moz-border-image: url(banner2.jpg) 30 30 round; /* Firefox */
    border-image: url(banner2.jpg) 30 30 round;
}
#stretchImageBorder {
    -webkit-border-image: url(banner2.jpg) 30 30 stretch; /* Google Chrome */
    -ms-border-image: url(banner2.jpg) 30 30 stretch; /* IE */
    -moz-border-image: url(banner2.jpg) 30 30 stretch; /* Firefox */
    border-image: url(banner2.jpg) 30 30 stretch;
}
</style>

When we run the preceding code, we'll get the following output in all browsers.

 

Repeated

 

 

Stretched

 

 

As you can see in the preceding output, the "round" value for the "border-image-repeat" property repeats the image to fill the area. Whereas the "stretch" value (the default) doesn't repeat the image, instead it uses the single image to fill the entire area.

 

In this introductory part, we've seen what CSS is, its various levels and versions with the features in each version. CSS3 is browser compatible. We'll take a closer look at other modules/features of CSS3 in the next series.

 

If there's any mistake in this article then please let me know. Please provide your valuable feedback and comments.