Exercise : Boxes (by Alex Miller)

Given boxes.html, write boxes.css to make the appearance on the next slide. 

<!DOCTYPE html>
<html>
	<head>
	<link href="boxes.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
	<div id="outer-box">
		<div id="inner-box"></div>
	</div>
	</body>
</html>

Exercise expected output

The outer border of the box is red, the inner border of the box is black, and the inner background color of the box is yellow.

Both the outer and inner borders have a width of 50 pixels. The yellow portion of the box has a width and height of 200 pixels. The overall box has a width and height of 400 pixels.

Exercise solution 1

body {
	margin: 0;
	padding: 0;
}

#outer-box {
	background-color: red;
	width: 300px;
	height: 300px;
	padding: 50px;
}

#inner-box {
	background-color: yellow;
	width: 200px;
	height: 200px;
	border: 50px solid black;
}

Exercise solution 2

body {
	margin: 0;
	padding: 0;
}

#outer-box {
	background-color: black;
	width: 300px;
	height: 300px;
	border: 50px solid red;
}

#inner-box {
	background-color: yellow;
	width: 200px;
	height: 200px;
	margin: 50px;
}

(There are more ways to solve this problem.)