You may have noticed in a few of my posts I’ve started using a yellow highlighter to point out the important things. I got the idea from the 37 Signals guys.

At first I just used a span tag with a style:color:yellow. I knew from the beginning this wasn’t the best way to do it. I needed a CSS style that could be used and changed everywhere. Here’s how you do it.

We are going to use a span tag to mark the text to by highlighted.For those of you that don’t know CSS at all, the two special tags you can use to mark text at div and span. Div is good for paragraphs and puts space after it. Span is good for in line text, and since we are going to be highlighting just individual sentences and phrases it is what we need.

The span tag is going to have a class attribute, which I called “highlight”. A class is a defined style that can be used more than once in a page, as opposed to an id, which can only be used once. You can set the name of the class to anything you want.

Go find your theme’s CSS file. I’m using Cutline, so my CSS file is at wp-content/themes/Cutline/style.css. Add this definition to the CSS file.

span.highlight
{
background-color:yellow;
}

Obviously you can make the highlight style anything you want. If you want the cool highlighter look, all you have to do is change the background color to yellow. But you could choose to use some text style like bold or small caps. The beauty of defining this as a span subclass instead of just redefining bold is you can change it any time you want.

Now to use it. Put a span tag around any text you want highlighted like this:

<span class="highlight"> your text to be highlighted </span>

That’s all there is to it. I need to do some research and see add a button to WordPress’s tool bar in the editor, just to make it easier to use.