An underused but very powerful technique consist of using multiple css classes on some html elements. This is very useful for example when you have multiple items of the same type and want to have a consistent look with some variations between the items.

A standard widget

On the right of this page (at least if you are using a regular desktop browser) there are some widgets. They all have the same look but sometimes you might want some widgets to stand out from the other widgets. For the examples in this post, a widget consists of a headline represented by an h3.caption element, and some content represented by some p elements. Typical content for a widget can include lists and tables but we stick to paragraphs here for simplicity.

Continue reading →