CSS Trips (Tricks & Tips)

Here are some ultra cool CSS techniques to get you through some of the hard times of coding. Each one is handy in its own special way and has its own advantages. Photo by Nils Geylen

1. !important

This CSS element allows certain items to take precedence over others, ignoring their position in the document. Normally CSS takes the last given entry as correct but this can overwrite it. This unfortunately doesn’t work in IE but is still very handy.

Example Code:

margin-right: 20px !important;

2. Effects

Want to make a very cool looking button or box with minimal effort? Well CSS can do just that. The two elements that come to mind are the opacity tag and CSS3 border-radius tag, they currently don’t work in all browsers but hopefully will soon.

Border-Radius Code:

-moz-border-radius: 10px; -webkit-border-radius: 10px;

Opacity Code:

opacity:0.6;

3. Center Alignment

This is a super easy way to center align a block element like a div tag. It basically means no margin top and bottom and automatic margining right and left, which causes it to be in the center.

Code:

margin:0 auto;

4. Short Hand

This is must have, and very simple to implement. Instead of writing font-size, font-family, font weight and font-style you can write it into one simple line.

Code:

font: italic bold 28px/32px Verdana,Geneva,sans-serif;

5. Vertically Align Text

This little tip can come in very handy when designing simple pages with little content. It also saves using loads of <br> tags which is very tempting I know.

Code:

height: 100px;line-height:100px;

6. Using Two Classes

Your CSS will become very messy if you duplicate things for a minor change. This once again is very useful and helps when you have two classes with a single <div> tag. All that is needed is a space between the classes.

Code:

<div class=“classone classtwo” >

Tags: CSS, css3, design, hand, html, important, short, tips, trick, web

Entry Posted: on 8th April 2009
Filed under: CSS