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”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://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: