HTML (Unstyled)

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Page title goes here</title>
</head>
<body>
	
	Page content goes here...
	
</body>
</html>

HTML (Embedded Styles)

Useful for quick / easy styling, but not recommended for real web pages.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Page title goes here</title>
	<style>
		/* CSS code goes here... */
		.body {
			background-color: yellow;
		}
	</style>
</head>
<body>
	
	Page content goes here...
	
</body>
</html>

HTML (Linked Stylesheet)

This is the most professional way to include CSS, and is the only way to have common styles that can be applied across multiple pages of your site.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Page title goes here</title>
	<link rel="stylesheet" href="yourstylesheetfile.css">
</head>
<body>
	
	Page content goes here...
	
</body>
</html>

Note that unlike the "embedded styles", a linked CSS file must not contain the <style> tag.

CSS Stylesheet

* {
	box-sizing: border-box; /* Make it easier to work with percentage widths by including padding and border in box sizes */
}
 
img { /* Scale down images on narrow screens so they don't extend past the right edge of the window */
	width: auto;
	max-width: 100%;
	height: auto;
}
 
.clearfix {
	clear: both; /* Force a new "line" in your layout by inserting <div class="clearfix"></div> after the last floated element */
}
 
h1, h2, h3, h4, ul, ol {
	margin: 0; /* Remove annoying margin on some block-level elements */
}
 
p {
  margin: 0 0 10px 0; /* Remove top margin from paragraphs, but keep bottom margin */
}
 
body {
	margin: 0; /* Ensure body background color will "bleed" to the edge of the window */
	background-color: #fff9f9; /* Set page background color */
	font-family: sans-serif; /* set default font for the entire page */
}
 
 
/* Add more CSS here... */