A great feature of CSS is that it allows you to use multiple classes on a single element. Using multiple CSS classes on one element is supported in all browsers but the very oldest, so it is a pretty safe tactic to use. Here at ITzetta, we use this function to streamline our code and make it more consistent.
Here’s an example of how this would work. Say you have two divs and you want them both to float left, be 200 px tall, have 10 px of padding, and have a blue background. However, you want one to be 200 px wide and the other to be 400 px wide.
With the traditional method, you would write your CSS classes for each div like this:
.firstBox {
float:left;
height:200px;
padding:10px;
background-color:blue;
width:200px;
}
.secondBox {
float:left;
height:200px;
padding:10px;
background-color:blue;
width:400px;
}
And your HTML for the divs would be like this:
<div class="firstBox"></div>
<div class="secondBox"></div>
Now here’s what your CSS would look like if you took advantage of using multiple classes per element like we do here:
.fl {float:right;}
.h200 {height:200px;}
.p10 {padding:10px;}
.bgBlue {backgroundcolor:blue;}
.w200 {width:200px;}
.w400 {width:400px;}
And here’s what your HTML would look like with those classes:
<div class="fl h200 p10 bgBlue w200"></div>
<div class="fl h200 p10 bgBlue w400"></div>
As you can probably tell just by looking at the code, this will become increasingly convenient as you write more code and have to style more elements. It allows you to keep consistency because you are recycling the same styles over and over. It also prevents you from having to write a new CSS class for every single element. If you want a padding of 10 px on multiple elements, you can just reuse a single class.
I hope this article gave you a little tip on how to increase your CSS coding skills and some insight to how things work here at ITzetta. Check in next week for another article!