CSS is a very simple and easy yet powerful but the difficult part is to make the layout displayed similar in all browsers. Lets discuss some easy but useful CSS tips and tricks that will help you to complete some tasks quickly.

CSS Group Selector

CSS group selector is a very useful practise that will minimize the coding and will help you to avoid repeating declarations.

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

}

Centering Elements

Firefox and Safari makes it easier to center an element by just declaring the width and setting margin left and right to auto. But for IE, you have to specify text-aling to center in the parent element.

body {
text-align:center;  /* for ie   */
}

#container {
width:800px;
margin:0 auto;
text-align:left;
}

Text Transformation

You can very easily transform your text to lowercase, uppercase or capitalized the first character of the word using CSS.

h1 {
text-transform:uppercase;
}

h2 {
text-transform:capitalize;
}

p {
text-transform:lowercase;
}

Hidden Text

You may want to use hidden text to replace images but also want to make sure search engines can grab the keywords.

a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}

PNG Fix for IE6

PNG images may not show up as you wanted in IE6, so here is the hack you can use to solve the problem.

.png_hack {
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/the_image.png’);
}

Setting Transparency Using CSS

Setting transparency using CSS is difficult to show on all browsers. However, here is the tricks to solve it.

.transparent_class {
filter: alpha(opacity=50);  /* ie  */
-moz-opacity: 0.5;            /* old mozilla browser like netscape  */
-khtml-opacity: 0.5;        /* for really really old safari */
opacity: 0.5;                /* css standard, currently it works in most modern browsers like firefox,  */
}