Exercise : Lex (by Morgan Doocy)

Given the following HTML, what CSS would be necessary to produce the expected output below? (Assume the red line is 3px thick, and the default font is used.) Are any HTML changes needed?

<h1>lex parsimoniae</h1>

Exercise solution

First, wrap the text inside the <h1> in an inline tag. The <em> tag is one possible choice:

<h1><em class="term">lex parsimoniae</em><h1>

Then add the following CSS rules:

h1 {
	text-align: center;
	background-color: #cccccc;
}
em.term {
	border-bottom: dashed 3px red;
}