Welcome to our newest tutorial, “Basics of CSS3”. This tutorial brings you the advanced concepts in Cascading Style Sheet (CSS) with regard to CSS version 3. So before moving on we recommend you to go through our previous tutorial “Beginner’s Guide to CSS” which tells you about all the dummies work in styling a web page to freshen up your minds.
CSS Version 3
CSS3 is the latest standard for CSS. It is completely backward compatible with earlier versions of CSS. Most important thing that W3C came up with CSS3 was the module concept. It emerged because, CSS 2, which was the previous version had a large unmanageable single specification defining all of the various features. Therefor CSS3 is divided into several separate documents called “modules”. Each module adds new capabilities or make extending the features defined in CSS2, preserving backward compatibility. CSS3 specification is still under development by W3C. Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published. Following are the few of most important Modules you can see on CSS3.
- Box Model
- Backgrounds and Borders
- Image Values and Replaced Content
- Text Effects
- 2D/3D Transformations
- Multiple Column Layout
- User Interface
In the next few sections we are going to cover up most of those modules with introducing fascinating tricks to color up your web site.
We already know how to add borders with using HTML attribute border in the table element, as well as using CSS property border. We added thick borders, thin borders, colored borders and styled borders. But they were all straight lined borders. How about giving a round cornered borders for your HTML element which gives a grandish look. We’re going to teach you how to do that.
We already know how to add images on a web page. When we want to add a motion, a transition and transformation in the website, we done it using the gif format image. But now on you do not need gif. We are going to teach you how add motion, transformation and transition to your web page through a simple code line.
We already know how to add a background color. But it was always just a single plain color. If you want a rainbowed background you done it using a rainbowed background image. But now on you do not need an image to add a gradient background. We are going to teach you how to do that.
We talked about texts, fonts and layouts which are the necessary concepts that needed for a publication. But we never talked about columns like as in the news papers. But you know we can create columns by using a table. But now on we do not need tables to fulfill that task. We are going to teach you how add multiple columns on your text.
Don’t you feel like we’ve being advanced now? Hell yes!!! We are not beginners any more. So be prepared. We have a long journey to go. Tune in…
Let’s look at New Look of CSS3 Borders