5 CSS tips & tricks

I was searching hacks and tricks on css and found this article which is simple and very useful. I hope this will be informative to others too.

1. Avoid CSS hacks, use future proof method

We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:

<!--[If IE 5]>
ie 5
< ![endif]-->
 
<!--[If lte 6]>
ie 6 and lower
< ![endif]-->
 
<!--[If gte 7]>
ie 7 or higher
< ![endif]-->

2. Use group selector

Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your style sheet. We can group the selector to avoid repeating declaring the same properties for different elements

h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}

3. Center elements

It’s easy to center an element, for Firefox and Safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
    text-align:center;  /* for ie   */
}
 
#container {
    width:800px;
    margin:0 auto;
    text-align:left;
}

4. CSS Positioning

This is something I’ve just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.

#container {
    position: relative;
    width:500; height:300;
}
 
#item {
    position: absolute;
    left: 200px;
    top: 50px;
}

5. Text transform

This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS – Text transform

h1 {
    text-transform:uppercase;
}
h2 {
    text-transform:capitalize;
}
p {
    text-transform:lowercase;
}

Please have your say.