You can add a background color to any element, including a heading. You can use the next CSS rule for all level two headings in a document:
File test.css
h2 {
background-color: #F4C90A;
color: #0C0C0D;
font: 12px Arial, Helvetica, Geneva,Verdana, sans-serif;
padding: 2px;
}
Note: You can use the padding to adjust the space between the heading text and the edge of the colored area.
The next picture shows the result if you use the rule in with the 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 add a background color to a heading 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>
<h2>Worst Storm in 100 Years Seen for Northeast U.S.</h2>
Hurricane Sandy will probably grow into a "Frankenstorm" that may become the worst to hit the U.S. Northeast in 100 years if current forecasts are correct. Sandy may combine with a second storm coming out of the Midwest to create a system that would rival the New England hurricane of 1938 in intensity, said Paul Kocin, a National Weather Service meteorologist in College Park, Maryland. The hurricane currently passing the Bahamas has killed 21 people across the Caribbean, the Associated Press reported, citing local officials.
</body>
</html>
Adding of background color to a heading with CSS