CSS which stands for Cascading Style Sheets is a language to give better look and feel to the pages created on any markup languages like HTML, XHTML, and XML etc. CSS was first introduced in December of 1996. The purpose to launch the CSS is to make the presentation of the HTML and XHTML pages more attractive, easy and understanding. HTML here stands for Hyper Text Markup Language which was first launched in 1991, and was introduced by Berners-Lee. So from 1997 onwards these both the languages works together to make websites more perfect and eye catching. At present there would not be any website on the web which would not be using CSS, whether it is using HTML or XHTML or XML or any other markup language, it’s the different thing. But thinking about the website without the work of CSS is second to impossible.
Currently most of the browser supports CSS2.1 and HTML 4.01. But as CSS3 and HTML5 are mostly launched, every browser making company is highly considering these two for their next version launch. And probably in IE 9 most of the features of CSS3 and HTML 5 would be compatible. Mozilla Firefox already supports many features included in CSS3 and HTML 5. The same way Google Crome and Safari too supports many features of CSS3. So it is really good news for present and upcoming web designers. These both provide less write more gain kind of stuffs. One would need to write very less line of code and would be able to get more features. If you are not much interested about your website’s user friendly GUI and attractive design then it does not matter much to you whether it is CSS2.1 or CSS3 and HTML 4.01 or HTML5. But if you are very much precise about the way your website look then you definitely got to know that what’s there in CSS3 and HTML5.
If we talk about CSS3 first, let’s see why it became a buzz in the arena of World Wide Web. It’s the features provided by CSS3 which is making it popular before even fully launching it. It provides highly dynamic and decorative features to the simple HTML page. It is providing stuffs like rounded corners, multiple background, direct web fonts, wrapping to the text, stroke and shadow to the text, 2D transformation to the object, animations, gradients, opacity, HSL and HSLA colour, background clipping, outline, box-resizing, box-shadow, top-right-bottom-left navigation, attribute selector, and overflows-x and y etc. These are all the features you can play with, which were not there in the previous versions of CSS.
These features can be used to make the web page and its content load faster and accurate. As CSS is always embedded it would load simultaneously with the page loading and hence would not take any extra time for loading. Now take a simple example of box-shadow, if we use a previous version of CSS there is no option to give a shadow to a div or span any other attribute. So what the programmers do is—they put the shadow image at the bottom of the div to give the shadow effect. This extra image takes extra time for a page to load. Now, think about a shopping cart website which have around 100 products in a single page and every product div have shadow image. See, how much time and load would it cost to a single page? This is Just an example of box-shadow. The same example implies for the rounded corner div, Where there would be a background image to make a div rounded cornered. Giving a shadow to the text was never possible in the previous versions of CSS except you use jQuery which again would take more time to load. Previously, only RGB and Hex mode colours were supported but now one can use HSL (Hue-Saturation-Lightness).
Take another example where you need two images as a background of a single div. Is it possible to set two backgrounds? No. So what do you do? Take two div and putting overflow and then set the background of one to left and one to right, this is what you are doing for just giving two backgrounds. Isn’t this process too lengthy? That’s the reason CSS3 provides multiple backgrounds. Even background clipping is also possible. You can also use direct web fonts. And there are many more you can trick around. One can find out all the features and syntax for implementations at http://www.css3.info/preview/.
HTML5 which is also in a development phase is having some amazing features too. Have you ever thought of playing your video on your webpage without using any script of API? Do you think it is possible? With HTML5 it is. Even you can play video on the background and in front you can have a signup form and Text. HTML5 have introduced elements called ‘video’ which makes this possible. And even it is easy to implement and maintain. There are many other elements too, which are being embedded into HTML5; few of them are audio, footer, header, canvas, progress, time and the list is long. Again, these all elements are embedded in HTML and hence do not need any extra process of API to load these elements, so ultimately saves the load time and memory of the client machine. To know more about HTML5 elements, features and usages and maintenance you can refer to the given website: http://www.w3schools.com/html5/html5_reference.asp.