Divs and Spans - Exercise

Contact Us or call 1-877-932-8228
Divs and Spans - Exercise

Divs and Spans

Duration: 10 to 20 minutes.

In this exercise, you will add class and id attributes to div and span tags to an already existing HTML page. Open ClassFiles/CrashCourse/DivsAndSpans.html in a code editor. The HTML page already contains an embedded style sheet, which you will not need to modify. Your goal is to make the page render as follows.

There are no step by step instructions. Review the rules in the embedded style sheet and apply classes and ids as appropriate.

Solution:

CrashCourse/Solutions/DivsAndSpans.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Divs and Spans</title>
<style type="text/css">
	div
	{
		border: 5px solid #660066;
		padding: 20px;
		text-align: center;
	}

	span
	{
		border: 5px solid #666600;
		padding: 10px;
		text-align: center;
		font-size: .5in;
		color: #ffffff;
		font-family: monospace;
	}

	#topDiv
	{
		background-color: #990000;
	}

	#midDiv
	{
		background-color: #009900;
	}

	#bottomDiv
	{
		background-color: #000099;
	}

	.leftSpan
	{
		text-decoration: underline;
	}

	.midSpan
	{
		font-weight: bold;
	}

	.rightSpan
	{
		font-style: italic;
	}
</style>
</head>
<body>
<div id="topDiv">
	<span class="leftSpan">1</span>
	<span class="midSpan">2</span>
	<span class="rightSpan">3</span>
</div>
<div id="midDiv">
	<span class="leftSpan">4</span>
	<span class="midSpan">5</span>
	<span class="rightSpan">6</span>
</div>
<div id="bottomDiv">
	<span class="leftSpan">7</span>
	<span class="midSpan">8</span>
	<span class="rightSpan">9</span>
</div>
</body>
</html>
Next