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

css 3
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.
The second level (CSS2) was published in May 1998 by W3C. This level of CSS had new features like:
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: Many features are available in CSS3, some of them are the following.
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.
  1. <style>
  2. #repeatedImageBorder {-webkit-border-image: url(banner2.jpg) 30 30 round; /* Google Chrome*/
  3. -ms-border-image: url(banner2.jpg) 30 30 round; /* IE */
  4. -moz-border-image: url(banner2.jpg) 30 30 round; /* Firefox */
  5. border-image: url(banner2.jpg) 30 30 round;
  6. }
  7. #stretchImageBorder {
  8. -webkit-border-image: url(banner2.jpg) 30 30 stretch; /* Google Chrome */
  9. -ms-border-image: url(banner2.jpg) 30 30 stretch; /* IE */
  10. -moz-border-image: url(banner2.jpg) 30 30 stretch; /* Firefox */
  11. border-image: url(banner2.jpg) 30 30 stretch;
  12. }
  13. </style>
When we run the preceding code, we'll get the following output in all browsers.
Repeated
Repeated
Stretched
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.