A useful CSS technique is to apply multiple CSS classes to a single element; this is something I didn’t know was possible when I first started with CSS several years ago and I often find people do not realise it can actually be done.
The easiest way to explain how this works is with an example. If we defined the following CSS classes:
.underlined {
text-decoration: underline;
}
.red {
color: red;
}
Then we could made an underlined paragraph like so:
<p class="underlined">This text is underlined.</p>
and a red paragraph like so:
<p class="red">This text is red.</p>
Finally, we can make a red, underlined paragraph by assigning both CSS classes to the <p> tag by space separating the class names:
<p class="red underlined">This text is underlined and red.</p>
And here’s the above examples in action:
This text is underlined.
This text is red.
This text is underlined and red.
And yes, I know you should never ever call your CSS class names something like "underlined" or "red"; it was just easy to illustrate my examples with those names 😉
