HTML/CSS Tip: Specifying Multiple Classes
October 06 2008 by 
Adam
Since CFML developers are essentially very specialized web developers, I feel that it's important to continually learn and improve my skills not only with CFML, but also with HTML and CSS. Here's a trick I picked up earlier this year that I think could benefit a lot of people.
The beauty of CSS is that you can write simple, reusable rules that can be applied throughout your site to provide a consistent look and feel without setting individual display properties on every object on the page. You already knew that.
But let's say that you want all of your site's button elements to have the same overall style: a specific font, a background and border color, and maybe a set of color changes for hover (not displayed in IE). But on certain pages, you want all buttons to have a fixed width so that their edges line up when stacked vertically, and on other pages you want widths to be automatic so that you can fit more in a single horizontal row. This is a great case for multiple classes.
Take these two HTML samples (from different pages) for example. We'll start with our set of vertically stacked buttons:
<div id="buttons">
<button class="standard" onclick="doStuff1();">1</button><br />
<button class="standard" onclick="doStuff2();">2</button><br />
<button class="standard" onclick="doStuff3();">3</button>
</div>
And now our single row of horizontal buttons:
<div id="buttons">
<button class="standard" onclick="doFoo();">Foo</button>
<button class="standard" onclick="doBar();">Bar</button>
<button class="standard" onclick="doFooBar();">Foo & Bar</button>
</div>
Let's make them flat, with a light shade of gray for their background, and a darker shade of gray for their border. Add some font styling and a hover style, and they start to look pretty decent:
button.standard{
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
color: #666;
font-family: Tahoma, Verdana, Helvetica;
font-weight: bold;
}
button.standard:hover{
background-color: #935232;
color: #fff;
}
Now, here are the two classes that we'll use to specify widths:
button.autoW{
width: auto;
}
button.fixedW{
width: 200px;
}
To apply these size style classes without losing our other styles, we can add them to the class attribute, as if it were a space-delimited list, like so:
<button class="standard fixedW">...</button>
Now, we can have consistent color & hover styles for our site, and be able to specify either a fixed or automatic width for it. Using this method, if you decide later that you want your button hover color to be something different, you only have to change it in one place.
I've tested this with IE6 and 7, Safari, and Firefox 1-3. I presume Opera and other modern browsers also support this functionality.
Posted in HTML/CSS | 
7 comments
