Text Tricks With CSS

Highlighting (Works With NS 4.x)

It's easy to create an effect that makes text look as if it was marked with a highlighting pen, like this (you can choose a color other than yellow). Just add the following code to your style sheet:

.hilite { background-color:yellow}

Then, to highlight a word (or words), use the following code on the page:

<span class="hilite">this is highlighted</span>

Line Through (Works With NS 4.x)

There may be occasions when you want to strike out (line through) text, like these this. Just add the following code to your style sheet:

.linethrough { text-decoration: line-through}

Then, to line through a word (or words), use the following code on the page:

<span class="linethrough">there is a line through this</span>

Drop Cap

The following paragraph is an example of a drop cap paragraph created using CSS2:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

The definition of the drop cap appearance is included in your style sheet code and referenced in your document. The code below was used to create the preceding paragraph with a drop cap initial letter bold, italic, and navy blue, spanning three lines and floating to the left of the paragraph:

<head>
<style>
.dropcapparagraph:first-letter
{
font-size:300%;
font-style:italic;
font-weight:bold;
float:left;
color:navy;
}
</style>
</head>
<body>
<p class="dropcapparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>