CSS is surely one of the best things to happen to the web design community. With attributes and properties constantly being added to new fversions (CSS2, CSS3), its constantly being upgraded which spells nothing but enthusiasm for people like me. A thorough knowledge of CSS is simply a must if one wants to build powerful, good looking and yet, fast web pages. There are so many things that people look to images and javascript for, which are codesent in CSS. For example, the link hover colour change technique. Although a lot of people know how to do it using CSS (the :hover
pseudo-class), there are still some who look to javascript to fulfill this need.
If you keep a tab on digg, you would have noticed the constant flurry of CSS tricks that keep popping up now and then. Rounded corners seem to be the hot topic last I checked :P But there's enough information everywhere for those who are interested in working with CSS. Even at the Blogger Help Group, people keep asking layout questions which need a basic understanding of CSS. A few simple properties can be put together to create some really amazing effects. My trademark being enclosing everything in boxes. The CSS for the date box is here:
#h_date{background-color:lightyellow; border-bottom:1px solid #c0c0c0; color:#B38481;border-right:1px solid #c0c0c0; padding:4px; font-size:110%; float:right; opacity:0.50}
All I do is put the ID of the <div></div>
tags as h_date, and it automatically styles it! :)
Using CSS to its fullest
CSS immensely reusable, which is why inline styles are not recommended either by me or any other self-respecting web designer. Put all your styles in one place between the <style></style>
tags, even if you'll use the style just once in your document. It'll be easier to lookup, edit and remove if the need calls for it.
CSS also makes life simpler by allowing you to remove ads and other monstrocities off the page. Thats how the ad blocking extensions work most of the time. Catch the CSS of the advertisment container, and set its display
property to none
or something on those lines. You can use the same to hide the various advertisements put on your freely hosted web sites, which usually contain ads in the form of banners or texts. Do a view source, find the offending element container, note down all CSS'able details, and code-set the CSS attributes so that when the page autoinserts the tags and code for the ads, the CSS removes them! :) The best example that people have been using which is very visible (or invisible in this case) is the hiding of the Blogger Navbar by the following CSS code:
#b_navbar {height:0px; display: none; visibility:hidden}
which takes into account all the possibilities. Although this has now surfaced as a potential violation of their TOS, all the TOS mentions is that editing the Navbar in anyway is infringement. It doesn't say anything about hiding it altogether. So you can probably do it (like I have) till Blogger comes knocking on your door!
The future as I see it
CSS is really something really amazing, and its really easy to learn as well. Its extremely standardised (except for IE ofcourse) and all browsers respond almost similarly to it. The engine with the best CSS handling today is the Mozilla/Gecko engine. So browsers like Firefox and Flock gain from it. Hence these browsers are codeferred. There was a time when IE's non-standardised CSS was exploited by people, but now they too recognise the advantages of following the norm.
As more and more abilities and features are added to CSS, which currently can only be done using Javascript, people will probably start turning to it for the easiest of tasks (such as codeloading of images [not currently supported]), and then move to build more powerful applications. Maybe it will go a revolution just like Javascript did with AJAX. Maybe an ASSAX?
Who knows! But surely, its a technology to be reckoned with!
CSS Resources
Design By Fire: Designing pointers
CSS Help Pile: Collection of articles on CSS breakthroughs from the net
CSS Vault: CSS help site
Unmatched Syle: Gallery of sites which look amazing, and are mostly CSS based
Webreakstuff: A designing company with good credentials. Keep a tab on them for some design tips