How to highlight text on the page without using font tags with CSS

You can create a class for the highlighting style and apply it by wrapping the highlighted text with <span> tags that apply the class:

1. You can create a CSS .hilite class.

File test.css

body {

font: 1em

Arial, Helvetica,Geneva, Verdana, sans-serif;

}

.hilite {

background-color: #FFFFCC;

color: #B24422;

}

2. You can apply the class:

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to highlight text on the page without using font tags with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<h1>Hot news</h1>

<p>European (SXXP) stocks climbed for a second day as companies including <span class=”hilite”>BASF SE (BAS)</span> and <span class=”hilite”>Unilever NV (UNA)</span> posted results that exceeded analysts estimates. U.S. index futures and Asian shares also advanced.</p>

</body>

</html>

 

The next picture shows the result:

 

 

Highlighting of text on the page without using font tags with CSS

Highlighting of text on the page without using font tags with CSS