Step 1: Set Up The CSS

Lets start with identifying and writing out some of our most common CSS markup. We'll set them up as individual styles. The ones that we've set up here are the most basic, but the same technique can be applied to even the coolest CSS 3 properties.

.primaryColor{
color: blue;
}

.articleImage
{
border: 1px solid #292929;
padding: 5px;
}

.standOut{
font-size: 22px;
}

.important{
font-weight: bold;
}

.floatRight
{
float: right;
}

Step 2: Applying The Classes In Our Document

• <p class="primaryColor important">This text will be blue and bold</p>
• <img src="#" class="articleImage floatRight">This image will be floated to the right, and will have some padding and a border.</p>
• <p class="standOut">This text will be huge</p>
• <p class="primaryColor standOut important">This text will be blue, 22px large, and bold. </p>

Why It's Useful

This can be a massive help, especially when designing layouts... you can use one class to define the size and width, and another class to define the positioning. Hope this helped!

Editor's Note: Keep in mind that, in some of the older browsers - meaning older than IE 6 - this "multiple classes" method will fail. What are your thoughts on this approach? P.S. Have a killer quick tip? Email us and we'll talk.

discuss this topic to forum