HTML/CSS Tip: Specifying Multiple Classes
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:
And now our single row of horizontal buttons:
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:
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 | 5 Responses
a:link {
color: cyan;
font-weight: bold;
}
Okay, great, that works for most of the site or application, but what if the color clashes in a particular area, like say the nav bar?
#nav a:link {
color: lime;
font-weight: normal;
}
The advantage of this (and the reason I try to use is as much as is humanly possible is that it eliminates a morass of class names in the code. It's basically the same thing as avoiding "class explosion" in OOP.
So I would never have a "standard" class definition for buttons, because I would just style the button element that way and then use subsequent area-based selectors to override it as necessary. That means I don't have to add class="standard" to all my buttons, I can just omit that all-together unless I have some specific need for a particular class.
The area is sometimes a class also, for example:
.listtable thead a:link {
color:black;
}
because I may have more than one list table on a given page.
Basically if you ever have 2 or more of a given element (in this case "button") side-by-side with the same class name on them (in this case "standard"), ask yourself if you could get away with putting an ID or class on the parent element. :)
Mark, I swear by FireBug. I never browse without it. Its "inspect" tool and CSS pane are unparalleled!
FireBug is a god send. It's really the only significant reason for me to use FireFox honestly. People complain about IE, but I find all the major browsers to be relatively equal in terms of elegant UI, with the exception of FireBug which only affects us programmers. :)