CSS Float Property

Highlight Text with CSS

With CSS, you can highlight text on a page so it looks like you ran a yellow highlight marker over it, or it could be any special color you choose. If it's not overused on a page, this is a useful trick for emphasizing a few important words or key points you want to make.

Just add this code to the HEAD section of your HTML page:

<style type="text/css">
.hilite	{background: #ffff00;}
</style>

By creating a CSS rule like this, you've created a class called .hilite, although you could have called it .pudding if you wanted to, the name can be anything. Now the table is set. To use it to highlight a text passage, you only need to add the hilite class to a font tag, paragraph tag, or other HTML element. Here's how I did it for a couple words at a time:

<font class="hilite">This text would be highlighted.</font>

If you used the above code on a page, the words, "This text would be highlighted" would have a yellow background color behind whatever your text color is. You can add your own text color too, by simply adding:

color: red;

...after the background color. Of course, you can change the colors to anything you want by changing the hex code or color name to the one you want.

You can also use that hilite class with any other HTML text element, such as with a heading tag:

<h1 class="hilite">Do you believe in belief?</h1>

With that code, your heading would be highlighted. That's what we like around here, highlighted heads...just color me yeller, maw!

You can use these style tags in a linked stylesheet or as an inline style, as well as with the embedded style shown above. If you don't know how to create a linked style sheet, read my Introduction to CSS. To use it as an inline style just add the following style tag to the HTML font element, such as:

<font style="background: yellow; color: red; 
  font-weight: bold;">Oh my gosh!</font>

On your web page, the above code would look like this:

Oh my gosh!

Now go find a big, important word to highlight...and don't forget to color your head yellow if you want to be like me!

Web Design

Site Information

More Boogie Jack Sites

Highlight Text with CSS