5 CSS tricks you may not know

1. Using multiple classes together

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. You can actually assign as many classes as you like.

For example:


<div class="class1 class2"></div>


The class names are separates by a space. So that means "class1" and "class2" calls up the rules assigned to the div. If any rules overlap

between the two classes then the class which is below the other in the CSS document will take precedence.

2. !important ignored by IE

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE.

For example:


margin-top: 3.5em !important; margin-top: 2em;


So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em.

3. Centre aligning a block element

If you wanted to fixed a width website of layout, and the content floated in the middle of the screen.

For example:


#content
{
width: 750px;
margin: 0 auto;
}



4. Changing Cursor

The cursor property specifies the type of cursor to be displayed when pointing on an element.

For example:


#wrapper a:hover
{
cursor: pointer;    /*crosshair*/
}



5. Transparency

This makes any element transparent.

For example:


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


This code makes the element 50% transparent- you can adjust the levels accordingly. Transparency is a bit weird because each browser reads it differently, so you need to make separate statements.

opacity: This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards.

filter: This one you need for IE.

-moz-opacity: You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

-khtml-opacity: This is for way old versions of Safari (1.x) when the rendering engine.