Programming Tutorials

Highlighting text on a page using CSS

By: Emiley J.  

With CSS you can highlight text on a page, making it look like you ran a yellow highlight marker over it. This is great for emphasizing important words or points. 

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

<style type="text/css"> 
<!-- 

.HL {background: #ffff99; 
color: #000000;} 

--> 
</style> 

What you've done is create a CSS class, and now the table is set. To use it to highlight a passage, you could write: 

<font class="HL">this is highlighted</font>

The words "this is highlighted" will have a yellow background with black text. Of course, you can change those colors to anything you want by modifying the colors in the CSS code. 

Let's not stop there. OK? What about if we wanted to highlight an entire paragraph? If you don't like messing with tables, try this style tag: 

<P style="background-color: FEE333";> 

All of the text in the above paragraph will be highlighted in yellow-orange. To change that color, just substitute any other hex code or use a color name. 

This CSS tag works in both Netscape and Internet Explorer. 

Archived Comments