Web Development Tutorial for Beginners LearnCode.academy #3

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Layout</title>
		<link href="styles/main.css" rel="stylesheet" type="text/css" />
		<!-- UTF-8 is a variable width Unicode format that is compatible with ASCII or plain text for the basic alphanumeric characters.
		By using the 'upper half' of the 8 bit ASCII set and extension codes, it can handle over a million unique characters... -->
		<meta charset="UTF-8">
	</head>
	<body>
		<header>
			<nav>
				<h1>My Page</h1>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Links</a></li>
				</ul>
			</nav>
		</header>

		<div>
			<div class="col">col1</div>
			<div class="col">col2</div>
			<div class="col">col3</div>
		</div>

		<footer>©2015 My Site</footer>
	</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
body
{
	/* by default the body has some margin */
	margin: 0;
}

header
{
	background: #999;
	color: white;
	padding: 15px 15px 0px 15px;
}

header h1
{
	/* by default it has margins */
	margin: 0;
	/* this is going to be inline with the nav since we put inline */
	display: inline;
}

nav ul
{
	/* by default it has margins */
	margin: 0;
	/* this is going to be inline with the nav since we put inline */
	display: inline;
	padding: 0 0 0 15px;
}

nav ul li
{
	/* makes the list items all next to each other, and allows you to specify the list items more */
	display: inline-block;
	list-style-type: none;
	background: black;
	color: white;
	/* padding spaces from the inside */
	padding: 5px 15px; /* you can also put: padding: 5px 15px 5px 15px */
}

nav ul li a
{
	color: white;
}

/*
	what after (a pseudo-element) does, is make a fake element after the row, and does whatever
	we tell it too.

	so for this example, we say that after the row, clear both.
*/
.row:after
{
	/* forget about the floats and wrap around */
	clear: both;
	/*
		these next two lines are if you have multiple other divs
		for the class row
	*/
	content: " ";
	display: table;
}

.col
{
	background: #333;
	border-radius: 5px;
	/* everything within the column now floats left */
	float: left;
	width: 31%;
	margin: .5%;
	padding: 10px .5%;
	color: white;
}

footer
{

}

/*
	margin spaces from the outside, padding spaces from the inside

	Wwen you float things, they're gonna just keep wrapping around

	when you use percentage layouts, it's the best because it'll
	look the best on all devices
*/