5 Useful CSS Tips and Tricks

Here are some simple yet effective and useful CSS tips and tricks for beginners.

1. Whenever Possible always enable Gzip Compression on server side as it will reduce the size of CSS and JavaScript files without losing any content.

2. Group together the CSS elements that uses the same poperties and values. It will reduce the work of repetition. To group elements together use comma as a seperator.

Example – h1 { color:#011; }
h2 { color:#011; }
Combine them as such:

h1, h2 { color:#011; }

3. Always use whitspace to format your CSS stylesheets. Whitespace is important for CSS readability.

4. Use following stylesheet to add background image to any input box.

input#sometextbox {
background-image:url(‘back-image.gif’);
background-repeat:no-repeat;
padding-left:10px;
}
5. Use following stylesheet to make an element transperant by setting the opacity level.

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}