Making a CSS highlighter

In law school I find myself highlighting a great deal in text. Unlike some of my fellow students, I try to only highlight the important stuff. Which got me to thinking, wouldn't it be nice if there were some CSS equivalent to the highlighter?

It doesn't take long to realize that there are two elements that would work well for this purpose: <em> and <strong>. Both are emphasis elements, much like how we assume highlighters work, and both can be easily styled.

So that this isn't entirely obvious, let's make highlighters of three colors: yellow, blue and pink. Each color will represent a different part of the text. For example, the thesis, the conclusion and some vocabulary word.

First, we need to mark up our text appropriately, denoting which areas of content are to be highlighted:

<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</strong> Duis sed diam. Vestibulum convallis gravida ante. Integer a nisl. Suspendisse sit amet arcu. Phasellus blandit, elit nec ultrices rhoncus, augue pede facilisis urna, id vulputate neque pede id tortor. <strong>Vivamus at dui:</strong> In id sapien nec augue rutrum elementum. Phasellus eget sapien. Aliquam elementum orci in nisl. Nam imperdiet nulla eget neque. Phasellus nec eros at elit porttitor bibendum. Fusce augue elit, sagittis id, consequat id, tincidunt ut, diam. Nam porttitor. Donec elit. Nullam felis arcu, gravida ut, auctor et, ullamcorper sit amet, urna. <strong>Fusce diam enim, convallis non, molestie in, accumsan sit amet, purus. Vestibulum nunc. Sed dapibus.</strong></p>

In this example the first and last line need are the ones we want highlighted. We'll pretend that these are the thesis and conclusion sentences. In addition, we've highlighted a word that will be vocabulary. All three need seperate styles. So well have a "highlight" class as well as a "thesis", "conclusion" and "vocab" secondary class.

The code is simple:

<style type="text/css">
strong.highlight {
 /* note that this may cause the highlight to overlap */
padding: .1em;

/* overlap is possible with border too */
border: 1px solid #000; 

/* we want to override the default behavior */
font-weight: normal; 

}

strong.thesis {
/* bright yellow */
background-color: #ff0;
}
strong.conclusion {
/* pink */
background-color: #f6c;
}
strong.vocab {
/* blue */
background-color: #6cf;
}
</style>

To make this work, we can take the above code and just apply dual styles:

<p><strong class="highlight thesis">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</strong> Duis sed diam. Vestibulum convallis gravida ante. Integer a nisl. Suspendisse sit amet arcu. Phasellus blandit, elit nec ultrices rhoncus, augue pede facilisis urna, id vulputate neque pede id tortor. <strong class="highlight vocab">Vivamus at dui:</strong> In id sapien nec augue rutrum elementum. Phasellus eget sapien. Aliquam elementum orci in nisl. Nam imperdiet nulla eget neque. Phasellus nec eros at elit porttitor bibendum. Fusce augue elit, sagittis id, consequat id, tincidunt ut, diam. Nam porttitor. Donec elit. Nullam felis arcu, gravida ut, auctor et, ullamcorper sit amet, urna. <strong class="highlight conclusion">Fusce diam enim, convallis non, molestie in, accumsan sit amet, purus. Vestibulum nunc. Sed dapibus.</strong></p>

The end result looks like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sed diam. Vestibulum convallis gravida ante. Integer a nisl. Suspendisse sit amet arcu. Phasellus blandit, elit nec ultrices rhoncus, augue pede facilisis urna, id vulputate neque pede id tortor. Vivamus at dui: In id sapien nec augue rutrum elementum. Phasellus eget sapien. Aliquam elementum orci in nisl. Nam imperdiet nulla eget neque. Phasellus nec eros at elit porttitor bibendum. Fusce augue elit, sagittis id, consequat id, tincidunt ut, diam. Nam porttitor. Donec elit. Nullam felis arcu, gravida ut, auctor et, ullamcorper sit amet, urna. Fusce diam enim, convallis non, molestie in, accumsan sit amet, purus. Vestibulum nunc. Sed dapibus.