September 2006 Archives

This is quick and simple tip but I know a bunch of people who weren't aware of it so I felt it warranted a post. We all know that CSS classes are a great way of applying a specific style or position to an element. However not a lot of people know that you can apply more than one class to an element. I've seen many people have styles like this:

.indent { padding-left: 25px; }
.highlight { background-color: #ffff00; }
.highlightindent { background-color: #ffff00; padding-left: 25px; }

While there isn't anything wrong with that third style, it isn't neccessary. You can apply both the indent style and the highlight style to the same element, just separate them with a space, like this:
<p class="highlight indent">This text is highlighted and indented</p>

Click here to see a demo

1 element. 2 classes. That's all there is to it. If you have a quick tip you'd like to see on Code Scene, send it to jay@codescene.com