<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
h1, h2, h3 { background: grey; color: white; }
hgroup > h1 { margin-bottom: 0; margin-top: 0}
header { background:transparent; color:red;}
</style>
</head>
<body>
<article>
<header>
<h1><a href="#">Chapter 1</a></h1>
<p>1</p>
</header>
<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
empor sit amet, ante...</p>
</article>
<article>
<header>
<h1><a href="#">Chapter 2</a></h1>
<p>2</p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante.</p>
</article>
<article>
<header>
<h1><a href="#">Chapter 3</a></h1>
<p>3</p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante.</p>
</article>
</body>
</html>