box_style.css

/* CSS Notes on the CSS Box Model */

html{
	background-color: white;
}
body{
	font-family: "Arial", sans-serif;
	background-color: lightgray;
	/* fixed width layout - will not adjust for different screen sizes */
	width: 1000px;
	height: 1000px;
	margin:auto;
}

/* The BOX MODEL helps us think about the web as a series of boxes we can style. The elements of a box from insdie out are:
	1. CONTENT
	2. PADDING
	3. BORDER
	4. MARGIN

To calculate the width of an element using the box model:
+ 320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

CONTENT has a width and height and will fill up available space. e.g. our Lorem Ipsum text. */
.box {
	/* The FLOAT property is used for positioning and formatting content. e.g. Let an image float right or left of some text in a container.*/
	float:left;
	background-color:white;
	/* BORDER */
	border-color:orange;
	border-style:solid;
	border-width:10px;
	border-radius:20px;
	/* MARGIN */
	margin: 10px;
	/* PADDING */
	padding: 10px;
	/* Challenge: how wide to make all the boxes so nicely fit within 1000px */
	width:273px;
}

h1{
	padding: 10px;
}

/* By right-clicking on a web browser, we can use the inspect element browser tool to view and manipulate our source code.
*/