Gyaan Sutra On entrepreneurship and technology

A page with a good CSS is it’s own heaven. A page with a bad CSS is it’s own hell.

For years, CSS has been defining the fashion in the internet industry. Yet, the designers of the different browsers have still not been able to decide about how CSS ought to be used. What works in one browser fails in the other, and vice versa. So when I decided to start writing CSS for my pages about a month back, I made a checklist which I’m reproducing here. Most of it is free advice from the internet, and some from my own hit and trial process.

So here is some Gyaan on the 25 things to remember when designing your pages.

The Technical Gyaan

1-Margins and Paddings are a mess, more so in IE5. It is better not to use margin or padding in the same div# where you use height and width. If you just have to, use one of the techniques given below.

2-Here’s how to specify parameters for IE5

#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}

IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.

3-When you start getting stuck with browsers, start using child selectors. Start writing the code while keeping IE in mind, and then later write a child selector to change the values for oter browsers. eg.

div#header {margin-top:-3px;} body > div#header {margin-top:0;}

4-To center align a div in IE, you need to enclose it in another div which has text-align propertly set to center. It is quite logical how to do it in Firefox.

5-When writing the CSS, if you use define the variable as ‘height’, all browsers would be able to read it. If you define it as ‘#height’, all IE browsers can read it, and if you define it as ‘_height’ only IE6+ browsers can read it.

6-Decide beforehand, which element you would like to style. It is useless to style all components when there are only a fixed few you need to style. For example, if you are looking at all div#poopoo elements use #poopoo {…, if you only need to design specific poopoo divs, say inside a ‘p’ tag, use p poopoo {…, if you want to style different components with the same style, use .poopoo {… and use the class.

7-Only using margin-left: auto, margin-right: auto, will not align your div in the center. You need to assign text-align: center, and create divs inside the bigger div.

8-Don’t create div’s for everything, merge different values together.

h1, h2, h3 { color: #FF0000; }

9-If you use divs with absolute positioning, use them inside a div with relative positioning.

10-Instead of using

, it’s better to use

< div id='logo'>< /div>

#logo {  height: 100px;  width: 100px;  background: url('logo.gif') no-repeat;}

11-Look up your website on a mobile phone, and if you can’t see it properly, try to fix it.

12-When designing the site, instead of using overflow: none or overflow: auto, make the div increase it’s size using javascript. Pages look more serene if they adjust to changing content.

The Rest of the Shebang

13-Keep a check on which browsers are being used, and how much are people using them. So that you can decide your priority list. You can check the stats on browsers at TheCounter.

14-To test your page against all different kinds of browsers, you need all the different browsers. You can download all kinds of browsers at Evolt, for the same.

15-You don’t need new settings for IE 7.02, it’s similar to firefox. Finally.

16-Span tags don’t introduce a break, div tags do. Always think of divs as a box. The next line would be below the box. With span, it’s just text.

17-Always keep GotApi open in one tab, and keep checking it regularly.

18-Get Firebug for Firefox. There is no tool which is going to make your life so much simpler. After you install it in Firefox, dissect every site that you see. There is no other way to perfect your CSS.

19-Keep in clean and fresh looking, so that when you come back to it six months later, you don’t have to bang your head against the wall.

20-When defining the out most tags, make sure you define margin and padding as zero. If you don’t do that, your div in IE would seem to be below the div in Firefox because IE adds some extra margin on top.

*{margin: 0px, padding: 0px;}

21-If adding any ugly hacks, write them at the bottom of the page, and add it in comments that it is an ugly hack. So that when the hack gets fixed, you know exactly where to look. Another good think to do would be to comment out, yet add the code without hacks, so you know later, what you intended to do with it.

22-After you’re done, validate your code here.

23-Every three day, yes every three days, there is a article on the front page which links to all the best CSS sites. Look for that article and read as much as you can. And do it every three days. (Most of them show the same ones again and again. But that’s just because talent is so damn precious)

24-Don’t trust the CSS Gurus. Even after you’ve tested everything they said, and it works like a charm. Respect them, but don’t trust them. Two weeks later when a new browser they just might be as wrong as you. And anyways, all the gurus don’t always agree with each other too. You might not be a guru yet, but if you keep at it, you would be one day, and it’s always better to start practising.

25-When you run out of ideas, go over to cssremix or cssbeauty or cssdrive, and check out every small bit of css from the site that you loved most. And before you start, say out load, firebug is the master, I am it’s slave for all eternity.

In the end, here is what I have made over the last one week. The site is called MBA Karma, and it is perfect. Take a look and tell me if you agree.

Just remember if you register, you won’t get a mail. The mailer has not been setup yet. You can just login to your account and try out the demo.

So if you see any snags, let me know. Personal comments are welcome. Let me know if you have any good ideas.