Exit tutorial


HTML Tutorial
Cascading Style Sheet Tutorials
Highlighting Text

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

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

<style type="text/css">
<!--
.HL {background: #ffff00;
color: #000000;}
-->
</style>

What you've done is create a CSS class, and now the table is set. To use it to highlight a text passage, you'd code it like this:

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

The words "this is highlighted" would have a yellow background color with black text. Of course, you can change those colors to anything you want by changing the colors in the CSS code. If black is the default color of your text you can remove the "color: #000000;" part.

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

<h1 class="HL">This is a highlighted Heading</h1>

Now your heading will be highlighted.

You can use the style tags shown above in a linked stylesheet as well. Or as an inline style. To code an inline style you use the style tags within the HTML command, such as:

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

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

Oh my gosh!

Now go find an important word to highlight!

[Back to the Stage 6 Index]