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:
- CSS3 Series Part 1: Introduction, Features and Usage of CSS3
- CSS3 Series Part 2: Playing with Background.
- CSS3 Series Part 3: Multi column Layout.
- CSS3 Series Part 4: Playing with Border.
- CSS3 Series Part 5: Playing with Gradients.
- CSS3 Series Part 6: 2D Transformation with CSS3.
- CSS3 Series Part 7: 3D Transformation with CSS3.
- CSS3 Series Part 8: Animation with CSS3.
- 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 are 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;
- -ms-border-image: url(banner2.jpg) 30 30 round;
- -moz-border-image: url(banner2.jpg) 30 30 round;
- border-image: url(banner2.jpg) 30 30 round;
- }
- #stretchImageBorder {
- -webkit-border-image: url(banner2.jpg) 30 30 stretch;
- -ms-border-image: url(banner2.jpg) 30 30 stretch;
- -moz-border-image: url(banner2.jpg) 30 30 stretch;
- 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
![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.