My blog has moved into Beta!



Please note that my blog has changed addresses! It's all new and improved. Hence this old friend of mine had to be left alone. You can visit me at The Last Word (beta). It's all warmed up for you! :)

« Home

Bon Echo ImpressionsWindows - a victim of its own ambitionsGoogle too big for Google?Its a colour thingajaxWrite - what ticks me off!Del.icio.us back with new featuresGooglesoft?Web ApplicationsBlogger DowntimeGoogle Grid  »





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

Filed Under:

3 Comments

This comment has been removed by a blog administrator.

i think the best new trick of css must be without a doubt css sprites. hands down beatuifull aplication of css, it trully shows css at its fullest.
    Anonymous Anonymous, on Thu Mar 30, 10:49:00 PM  

CSS sprites is something which is based morely on logic than anything. I think pseudo classes and other dynamic content handlers are the true beauties of CSS. The ability to use classes and there being so many ways of referencing elements (via classes, id), is absolutely amazing.

I'll be looking into Sprites more closely and try and come up with new ways of using it .How many new ways can there be ... ? It can only be used with pseudo-classes (off the top of my head) ... but lets see! :)




Leave your comment
You can use some HTML tags, such as <b>, <i>, <a>

Or you can sign in as a different user.







Categories

Latest Updated

Subscriptions

Get My Blog In Your Mail!

Powered by Yutter

add this button to your site/blog as a link to this page! « link to me!
coComments my coComments
my claimID

subscribe to feed
Widgetize!
Google Reader add to google
del.icio.us The Last Word add to del.icio.us
Add to My Yahoo! add to yahoo!
Subscribe with Bloglines add to bloglines
add to msn
Add to netvibes add to Netvibes!
myFeedster add to feedster
Furl The Last Word add to furl


Archive Pages
January 2006 February 2006 March 2006 April 2006 May 2006 June 2006 July 2006 August 2006 October 2006 November 2006 December 2006

Advertisement


Song Of The Day:




Creative Commons License Widgetize!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
Aditya Mukherjee © 2005-06 | Powered by Blogger