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 for the first word. The second word is in Comic Sans MS. The larger letters are 2em and green in color.) Are any HTML changes needed? You can download the html file here.

<h1>Web Programming</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">
		Web Programming
	</em>
<h1>

You then need to add span tags to the first letter of each word, as well as the whole second word to be able to target them.

<h1>
	<em class="term">
		<span class="big">W</span>eb 
		<span id="font"><span class="big">p</span>rogramming</span>
	</em>
<h1>

Exercise solution

Then add the following CSS rules:

h1 {
	text-align: center;
	background-color: #cccccc;
}

em.term {
	border-bottom: dashed 3px red;
}

.big {
	font-size: 2em;
	color: green;
}

#font {
	font-family: "Comic Sans MS", fantasty;
}