jennz0r/Example 5.html

## Example 5.html
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css" media="screen"/>
	</head>

	<body>
	<div id="wrapper">
		<div id="cats">
			<div class="title">
				<h1>CATS</h1>
			</div>
			<p>You know you love <a href="http://en.wikipedia.org/wiki/Cat" target="_blank">them</a>... Kevin.</p>
			</br>
			<!-- OMG below this comment is an image of a cat! -->
			<div id="image">
				<a href="http://en.wikipedia.org/wiki/Cat" target="_blank"><img src="http://i.telegraph.co.uk/multimedia/archive/02351/cross-eyed-cat_2351472k.jpg"></a>
			</div>
		</div>

		<div id="cities">
			<div class="title">
				<h1>CITIES</h1>
			</div>
			<p>OMG, there are so many places I want to visit!</p>
			<div id="list">
				<ul>
					<li>Japan</li>
					<li>New Zealand</li>
					<li>Antarctica</li>
				</ul>
			</div>
		</div>
	</div>
	</body>
</html>

## style.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* General Element Selectors */

	body {
		background-image: url(kindajean.png);
		background-repeat: repeat;
	}

	h1 {
		padding: 10px;
		margin: 10px;
		font-family: helvetica, sans-serif;
		font-size: 48px;
		color: #31312e;
		text-align: center;
	}

	p {
		font-family: helvetica, sans-serif;
		text-align: center;
		color: #82a3ce;
	}

	ul {
		font-family: helvetica, sans-serif;
		text-indent: 10px;
	}

	a {
		color: #82a3ce;
		text-decoration: none;
	}

	img {
		border: 5px;
		border-style: solid;
		border-color: gray;
	}

/* This is where I'm going to style ID */

	#wrapper {
		width: 900px;
		margin: 10px auto;
	}

	#list {
		padding: 10px 0 10px 180px;
	}

	#image {
		padding: 0 0 10px 40px;
	}

/* This is where I'm going to style Classes */

	.title {
		margin: 20px;
		background-color: white;
		border: 1px;
		border-style: dotted;
		border-color: gray;
	}
	<html>
	<head>
	<link type="text/css" rel="stylesheet" href="style.css" media="screen"/>
	</head>

	<body>
	<div id="wrapper">
	<div id="cats">
	<div class="title">
	<h1>CATS</h1>
	</div>
	<p>You know you love <a href="http://en.wikipedia.org/wiki/Cat" target="_blank">them</a>... Kevin.</p>
	</br>
	<!-- OMG below this comment is an image of a cat! -->
	<div id="image">
	<a href="http://en.wikipedia.org/wiki/Cat" target="_blank"><img src="http://i.telegraph.co.uk/multimedia/archive/02351/cross-eyed-cat_2351472k.jpg"></a>
	</div>
	</div>

	<div id="cities">
	<div class="title">
	<h1>CITIES</h1>
	</div>
	<p>OMG, there are so many places I want to visit!</p>
	<div id="list">
	<ul>
	<li>Japan</li>
	<li>New Zealand</li>
	<li>Antarctica</li>
	</ul>
	</div>
	</div>
	</div>
	</body>
	</html>
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

	/* General Element Selectors */

	body {
	background-image: url(kindajean.png);
	background-repeat: repeat;
	}

	h1 {
	padding: 10px;
	margin: 10px;
	font-family: helvetica, sans-serif;
	font-size: 48px;
	color: #31312e;
	text-align: center;
	}

	p {
	font-family: helvetica, sans-serif;
	text-align: center;
	color: #82a3ce;
	}

	ul {
	font-family: helvetica, sans-serif;
	text-indent: 10px;
	}

	a {
	color: #82a3ce;
	text-decoration: none;
	}

	img {
	border: 5px;
	border-style: solid;
	border-color: gray;
	}

	/* This is where I'm going to style ID */

	#wrapper {
	width: 900px;
	margin: 10px auto;
	}

	#list {
	padding: 10px 0 10px 180px;
	}

	#image {
	padding: 0 0 10px 40px;
	}

	/* This is where I'm going to style Classes */

	.title {
	margin: 20px;
	background-color: white;
	border: 1px;
	border-style: dotted;
	border-color: gray;
	}