1. CSS Short-Hand Code:

When writing your CSS, you may want include many properties that could make your CSS code a bit messy. You can solve this problem by using CSS short-hand code to make your code neat and clean. The most common CSS properties that allow you to use short-hand code are font, margin, padding, background and border. The properties must be put into a specific order for your web browser to read them.

In the examples below you can see how much shorter and simpler your code can get:

Font:

#some-div{
font-family: Helvetica, Arial, Sans-Serif;
font-style: oblique; 
font-weight: bold; 
font-size: 16px; 
}

#some-div{
font: oblique bold 16px Helvetica, Arial, Sans-Serif;
}

Margin/Padding Properties:

This example also shows how to use the short-hand code for margin and the short-hand CSS for padding works the same, just replace margin with padding.

#some-div{
margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;
}

#some-div{
margin: 5px 10px 20px 15px;
}

If your top and bottom have the same margin and the left and right have the same margin you can use the code below. This also works the same for padding.

#some-div{
margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px;
}

#some-div{
margin: 10px 30px;
}

Background Property

#some-div{
background-color: #000;
background-image: url(image.jpg);
background-position: left top;
background-repeat: no-repeat;
}

#some-div{
background: #000 url(image.jpg) top left no-repeat;
}

Border Property

#some-div{
border-width: 2px; border-style: solid; border-color: #000;
}

#some-div{
border: 2px solid #000;
}

You can also use this short-hand CSS with border-top, border-right, border-left, and border-bottom.

#some-div{
border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;
}

#some-div{
border: 2px 5px 10px 3px;
}

2. Multiple classes together in one element

If you want to apply multiple classes to a certain element of your page, you can combine them as shown in the example below. All you need is to separate the classes with a space and voilá. Remember that CSS cascades so if you have the same properties in your second class as your first it will be overwritten by your second.

<div class="classOne classTwo">content here</div>

3. Underscore (_) and asterix (*) to hack multiple browsers

Sometimes coding for multiple browsers can be a pain as your styles can look different in each. A simple but effective solution is to add an asterix (for Internet Explorer 6 and below) or an underscore (for Internet Explorer 7 and above) in front of your property and that fixes your problems. In the example below we can have a margin-bottom property that will work differently for Firefox, Internet Explorer 6 and 7.

#some-div{
margin-top: 25px; *margin-top: 20px; _margin-top: 35px;
}

Firefox will give the element above a top margin of 25px while Internet Explorer 6 will give a 20px margin and Internet Explorer 7 a 35px margin. Pretty cool, huh?

Thanks for ready and please leave some feedback!

Back to top ↑