wfrench1517/index.css

## index.css
* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}

/*"W" logo*/

#logo {
	width: 200px;
	border-radius: 6px;
	position: fixed;
	top: 8px;
	z-index: 100;
}

/*Navigation pane to the left*/

nav {
	width: 200px;
	height: 100%;
	border: 2px solid #8090bc;
	background-color: #f7f9ff;
	position: fixed;
	top: 216px;
	border-radius: 6px;
}

/*Link styling*/

a:link {
	text-decoration: none;
}

a:visited {
	color: #2a5696;
}

a:hover {
	color: #d6a319;
}

/*Main content positioning*/

main {
	position: absolute;
	top: -8px;
	left: 232px;
	height: 2500px;
}

/*Headings in navigation pane and main content (color, indent)*/

h3 {
	background-color: #2a5696;
	color: #f7f9ff;
	padding-left: 6px;
	border-radius: 6px;
}

/*Headings in main contnent (width)*/

main h3 {
	width: 824px;
}

/*Code formatting*/

strong {
	font-family: monospace;
	font-weight: 700px;
	background-color: #2a5696;
	color: #f7f9ff;
}

/*Table (borders, margins)*/

table {
	background-color: #f7f9ff;
	border: 2px solid #8090bc;
	border-radius: 6px;
	margin-left: 12px;
}

/*Borders within the tables*/

.element,
td {
	border-top: 2px solid #8090bc;
}

/*Table column widths (property & value, description)*/

.property_value {
	width: 200px;
}

.description {
	width: 600px;
}

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>HTML & CSS Cheat Sheet</title>
		<link href="index.css" type="text/css" rel="stylesheet" />
	</head>
	<body>

		<!--This section is for the logo-->
		<header>
			<img id="logo" src="w.jpg" />
		</header>

		<!--This section is for the side navigation-->
		<nav class="navigation_topic">
			<h3>HTML</h3>
			<ul>
				<li><a href="#sectioning">Sectioning</a></li>
			</ul>
			<h3>CSS</h3>
			<ul>
				<li><a href="#positioning">Positioning</a></li>
				<li><a href="#z-index">Z-Index</a></li>
				<li><a href="#display">Display</a></li>
				<li><a href="#float_&_clear">Float & Clear</a></li>
			</ul>
		</nav>

		<!--This section is for the main content-->
		<main>
			<!--HTML Sectioning Elements-->
			<h3 id="sectioning">HTML Sectioning</h3>
			<table>
				<tr>
					<th class="property_value">Tag</th>
					<th class="description">Description</th>
				</tr>
				<!--header tag-->
				<tr>
					<td class="element"><strong>&lt;header&gt;</strong></td>
					<td>
						Logo, introdutory content, navigational aids, search form, author's
						name, user login, etc.
					</td>
				</tr>
				<!--nav tag-->
				<tr>
					<td class="element"><strong>&lt;nav&gt;</strong></td>
					<td>Navigation links, menus, tables of contents, and indexes</td>
				</tr>
				<!--main tag-->
				<tr>
					<td class="element"><strong>&lt;main&gt;</strong></td>
					<td>Dominate content area of a webpage</td>
				</tr>
				<!--heading tags 1-6-->
				<tr>
					<td class="element"><strong>&lt;h1&gt;</strong></td>
					<td>Section headings one to six</td>
				</tr>
				<!--section tag-->
				<tr>
					<td class="element"><strong>&lt;section&gt;</strong></td>
					<td>
						Generic standalone section of a document, doesn't have a more
						specific sectioning element, should include a heading
					</td>
				</tr>
				<!--article tag-->
				<tr>
					<td class="element"><strong>&lt;article&gt;</strong></td>
					<td>
						Forum post, magazine or newspaper article, blog entry, product card,
						user-submitted comment, interactive widget or gadget, any other
						independent item of content
					</td>
				</tr>
				<!--aside tag-->
				<tr>
					<td class="element"><strong>&lt;aside&gt;</strong></td>
					<td>
						Only indirectly related to main content, sidebars or call-out boxes
					</td>
				</tr>
				<!--footer tag-->
				<tr>
					<td class="element"><strong>&lt;footer&gt;</strong></td>
					<td>
						Footer for the nearest sectioning root element, author information,
						copyright data, links to related documents
					</td>
				</tr>
				<!--address tag-->
				<tr>
					<td class="element"><strong>&lt;address&gt;</strong></td>
					<td>Contact information</td>
				</tr>
			</table>

			<!--CSS Positioning Properties-->
			<h3 id="positioning">CSS Positioning</h3>
			<table>
				<tr>
					<th class="property_value">Property & Value</th>
					<th class="description">Description</th>
				</tr>
				<!--static positioning-->
				<tr>
					<td class="element"><strong>position: static;</strong></td>
					<td>
						Default positioning. Not affected by top, bottom, left, and right
						properties.
					</td>
				</tr>
				<!--absolute positioning-->
				<tr>
					<td class="element"><strong>position: absolute;</strong></td>
					<td>
						Positioned relative to nearest positioned ancestor. Without
						positioned ancestor, uses document body and scrolls with page. Can
						overlap other content. Uses top, bottom, left, and right properties.
					</td>
				</tr>
				<!--relative positioning-->
				<tr>
					<td class="element"><strong>position: relative;</strong></td>
					<td>
						Positioned relative to default. Other content will still respect the
						default positioning. Can be positioned with top, bottom, left, and
						right properties.
					</td>
				</tr>
				<!--fixed positioning-->
				<tr>
					<td class="element"><strong>position: fixed;</strong></td>
					<td>
						Fixed in place relative to user viewpoint. Does not leave a default
						positioning gap. Positioned with top, bottom, left, and right
						properties.
					</td>
				</tr>
				<!--sitcky positioning-->
				<tr>
					<td class="element"><strong>position: sticky;</strong></td>
					<td>
						Static position until user scrolls past predetermined offset and
						which point it "sticks" in an fixed position. Requires at least one
						top, bottom, left, or right property.
					</td>
				</tr>
			</table>

			<!--CSS Z-Index Property-->
			<h3 id="z-index">CSS Z-Index</h3>
			<table>
				<tr>
					<th class="property_value">Property & Value</th>
					<th class="description">Description</th>
				</tr>
				<!--z-index property-->
				<tr>
					<td class="element"><strong>z-index: 100;</strong></td>
					<td>
						Specifies which elements are in the front or back. Uses positive or
						negative numbers with the largest number in the front. Does not work
						with static positioning.
					</td>
				</tr>
			</table>

			<!--CSS Display Properties-->
			<h3 id="display">CSS Display</h3>
			<table>
				<th class="property_value">Property & Value</th>
				<th class="description">Description</th>
				<!--inline display value-->
				<tr>
					<td class="element"><strong>display: inline;</strong></td>
					<td>
						Will not start a new line and only takes up the minimum necessary
						space. Example default inline elements:
						<strong>&lt;span&gt;</strong>
						<strong>&lt;a&gt;</strong>
						<strong>&lt;img&gt;</strong>
					</td>
				</tr>
				<!--block display value-->
				<tr>
					<td class="element"><strong>display: block;</strong></td>
					<td>
						Will start a new line and takes up the full width available. Example
						default block elements:
						<strong>&lt;div&gt;</strong>
						<strong>&lt;h1&gt;</strong>
						<strong>&lt;p&gt;</strong>
						<strong>&lt;form&gt;</strong>
						<strong>&lt;header&gt;</strong>
						<strong>&lt;footer&gt;</strong>
						<strong>&lt;section&gt;</strong>
					</td>
				</tr>
				<!--inline-block display value-->
				<tr>
					<td class="element"><strong>display: inline-block;</strong></td>
					<td>
						Will not start a new line and takes up a determined width and
						height. Also respects top and bottom margins and padding.
					</td>
				</tr>

				<!--none display value-->
				<tr>
					<td class="element"><strong>display: none;</strong></td>
					<td>
						Used with JS to hide and show elements without deleting them.
						Example default display none:
						<strong>&lt;script&gt;</strong>
					</td>
				</tr>
				<!--hidden visibility value-->
				<tr>
					<td class="element"><strong>visibility: hidden;</strong></td>
					<td>Will also hide an element without affecting page layout.</td>
				</tr>
			</table>

			<!--CSS Float & Clear Properties-->
			<h3 id="float_&_clear">CSS Float & Clear</h3>
			<table>
				<tr>
					<th class="property_value">Property & Value</th>
					<th class="description">Description</th>
				</tr>
				<!--float property values-->
				<tr>
					<td class="element"><strong>float: left;</strong></td>
					<td>
						Positions content within a container. Uses the values left, right,
						inherit, and none (default). Can be used to position multiple
						<strong>&lt;div&gt;</strong> type elements next to each other.
					</td>
				</tr>
				<!--clear property values-->
				<tr>
					<td class="element"><strong>clear: left;</strong></td>
					<td>
						Determines what should happen with elements next to floating
						elements.
						<ul>
							<li>
								<strong>none;</strong> - Does not push element below left or
								right floating elements (default)
							</li>
							<li>
								<strong>left;</strong> - Pushes element below left floating
								element
							</li>
							<li>
								<strong>right;</strong> - Pushes element below right floating
								element
							</li>
							<li>
								<strong>both;</strong> - Pushes element below left and right
								floating elements
							</li>
							<li>
								<strong>inherit;</strong> - Element inherits clear value from
								its parent
							</li>
						</ul>
					</td>
				</tr>
			</table>
		</main>
	</body>
</html>
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}

	/"W" logo/

	#logo {
	width: 200px;
	border-radius: 6px;
	position: fixed;
	top: 8px;
	z-index: 100;
	}

	/Navigation pane to the left/

	nav {
	width: 200px;
	height: 100%;
	border: 2px solid #8090bc;
	background-color: #f7f9ff;
	position: fixed;
	top: 216px;
	border-radius: 6px;
	}

	/Link styling/

	a:link {
	text-decoration: none;
	}

	a:visited {
	color: #2a5696;
	}

	a:hover {
	color: #d6a319;
	}

	/Main content positioning/

	main {
	position: absolute;
	top: -8px;
	left: 232px;
	height: 2500px;
	}

	/Headings in navigation pane and main content (color, indent)/

	h3 {
	background-color: #2a5696;
	color: #f7f9ff;
	padding-left: 6px;
	border-radius: 6px;
	}

	/Headings in main contnent (width)/

	main h3 {
	width: 824px;
	}

	/Code formatting/

	strong {
	font-family: monospace;
	font-weight: 700px;
	background-color: #2a5696;
	color: #f7f9ff;
	}

	/Table (borders, margins)/

	table {
	background-color: #f7f9ff;
	border: 2px solid #8090bc;
	border-radius: 6px;
	margin-left: 12px;
	}

	/Borders within the tables/

	.element,
	td {
	border-top: 2px solid #8090bc;
	}

	/Table column widths (property & value, description)/

	.property_value {
	width: 200px;
	}

	.description {
	width: 600px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML & CSS Cheat Sheet</title>
	<link href="index.css" type="text/css" rel="stylesheet" />
	</head>
	<body>

	<!--This section is for the logo-->
	<header>
	<img id="logo" src="w.jpg" />
	</header>

	<!--This section is for the side navigation-->
	<nav class="navigation_topic">
	<h3>HTML</h3>
	<ul>
	<li><a href="#sectioning">Sectioning</a></li>
	</ul>
	<h3>CSS</h3>
	<ul>
	<li><a href="#positioning">Positioning</a></li>
	<li><a href="#z-index">Z-Index</a></li>
	<li><a href="#display">Display</a></li>
	<li><a href="#float_&_clear">Float & Clear</a></li>
	</ul>
	</nav>

	<!--This section is for the main content-->
	<main>
	<!--HTML Sectioning Elements-->
	<h3 id="sectioning">HTML Sectioning</h3>
	<table>
	<tr>
	<th class="property_value">Tag</th>
	<th class="description">Description</th>
	</tr>
	<!--header tag-->
	<tr>
	<td class="element"><strong><header></strong></td>
	<td>
	Logo, introdutory content, navigational aids, search form, author's
	name, user login, etc.
	</td>
	</tr>
	<!--nav tag-->
	<tr>
	<td class="element"><strong><nav></strong></td>
	<td>Navigation links, menus, tables of contents, and indexes</td>
	</tr>
	<!--main tag-->
	<tr>
	<td class="element"><strong><main></strong></td>
	<td>Dominate content area of a webpage</td>
	</tr>
	<!--heading tags 1-6-->
	<tr>
	<td class="element"><strong><h1></strong></td>
	<td>Section headings one to six</td>
	</tr>
	<!--section tag-->
	<tr>
	<td class="element"><strong><section></strong></td>
	<td>
	Generic standalone section of a document, doesn't have a more
	specific sectioning element, should include a heading
	</td>
	</tr>
	<!--article tag-->
	<tr>
	<td class="element"><strong><article></strong></td>
	<td>
	Forum post, magazine or newspaper article, blog entry, product card,
	user-submitted comment, interactive widget or gadget, any other
	independent item of content
	</td>
	</tr>
	<!--aside tag-->
	<tr>
	<td class="element"><strong><aside></strong></td>
	<td>
	Only indirectly related to main content, sidebars or call-out boxes
	</td>
	</tr>
	<!--footer tag-->
	<tr>
	<td class="element"><strong><footer></strong></td>
	<td>
	Footer for the nearest sectioning root element, author information,
	copyright data, links to related documents
	</td>
	</tr>
	<!--address tag-->
	<tr>
	<td class="element"><strong><address></strong></td>
	<td>Contact information</td>
	</tr>
	</table>

	<!--CSS Positioning Properties-->
	<h3 id="positioning">CSS Positioning</h3>
	<table>
	<tr>
	<th class="property_value">Property & Value</th>
	<th class="description">Description</th>
	</tr>
	<!--static positioning-->
	<tr>
	<td class="element"><strong>position: static;</strong></td>
	<td>
	Default positioning. Not affected by top, bottom, left, and right
	properties.
	</td>
	</tr>
	<!--absolute positioning-->
	<tr>
	<td class="element"><strong>position: absolute;</strong></td>
	<td>
	Positioned relative to nearest positioned ancestor. Without
	positioned ancestor, uses document body and scrolls with page. Can
	overlap other content. Uses top, bottom, left, and right properties.
	</td>
	</tr>
	<!--relative positioning-->
	<tr>
	<td class="element"><strong>position: relative;</strong></td>
	<td>
	Positioned relative to default. Other content will still respect the
	default positioning. Can be positioned with top, bottom, left, and
	right properties.
	</td>
	</tr>
	<!--fixed positioning-->
	<tr>
	<td class="element"><strong>position: fixed;</strong></td>
	<td>
	Fixed in place relative to user viewpoint. Does not leave a default
	positioning gap. Positioned with top, bottom, left, and right
	properties.
	</td>
	</tr>
	<!--sitcky positioning-->
	<tr>
	<td class="element"><strong>position: sticky;</strong></td>
	<td>
	Static position until user scrolls past predetermined offset and
	which point it "sticks" in an fixed position. Requires at least one
	top, bottom, left, or right property.
	</td>
	</tr>
	</table>

	<!--CSS Z-Index Property-->
	<h3 id="z-index">CSS Z-Index</h3>
	<table>
	<tr>
	<th class="property_value">Property & Value</th>
	<th class="description">Description</th>
	</tr>
	<!--z-index property-->
	<tr>
	<td class="element"><strong>z-index: 100;</strong></td>
	<td>
	Specifies which elements are in the front or back. Uses positive or
	negative numbers with the largest number in the front. Does not work
	with static positioning.
	</td>
	</tr>
	</table>

	<!--CSS Display Properties-->
	<h3 id="display">CSS Display</h3>
	<table>
	<th class="property_value">Property & Value</th>
	<th class="description">Description</th>
	<!--inline display value-->
	<tr>
	<td class="element"><strong>display: inline;</strong></td>
	<td>
	Will not start a new line and only takes up the minimum necessary
	space. Example default inline elements:
	<strong><span></strong>
	<strong><a></strong>
	<strong><img></strong>
	</td>
	</tr>
	<!--block display value-->
	<tr>
	<td class="element"><strong>display: block;</strong></td>
	<td>
	Will start a new line and takes up the full width available. Example
	default block elements:
	<strong><div></strong>
	<strong><h1></strong>
	<strong><p></strong>
	<strong><form></strong>
	<strong><header></strong>
	<strong><footer></strong>
	<strong><section></strong>
	</td>
	</tr>
	<!--inline-block display value-->
	<tr>
	<td class="element"><strong>display: inline-block;</strong></td>
	<td>
	Will not start a new line and takes up a determined width and
	height. Also respects top and bottom margins and padding.
	</td>
	</tr>

	<!--none display value-->
	<tr>
	<td class="element"><strong>display: none;</strong></td>
	<td>
	Used with JS to hide and show elements without deleting them.
	Example default display none:
	<strong><script></strong>
	</td>
	</tr>
	<!--hidden visibility value-->
	<tr>
	<td class="element"><strong>visibility: hidden;</strong></td>
	<td>Will also hide an element without affecting page layout.</td>
	</tr>
	</table>

	<!--CSS Float & Clear Properties-->
	<h3 id="float_&_clear">CSS Float & Clear</h3>
	<table>
	<tr>
	<th class="property_value">Property & Value</th>
	<th class="description">Description</th>
	</tr>
	<!--float property values-->
	<tr>
	<td class="element"><strong>float: left;</strong></td>
	<td>
	Positions content within a container. Uses the values left, right,
	inherit, and none (default). Can be used to position multiple
	<strong><div></strong> type elements next to each other.
	</td>
	</tr>
	<!--clear property values-->
	<tr>
	<td class="element"><strong>clear: left;</strong></td>
	<td>
	Determines what should happen with elements next to floating
	elements.
	<ul>
	<li>
	<strong>none;</strong> - Does not push element below left or
	right floating elements (default)
	</li>
	<li>
	<strong>left;</strong> - Pushes element below left floating
	element
	</li>
	<li>
	<strong>right;</strong> - Pushes element below right floating
	element
	</li>
	<li>
	<strong>both;</strong> - Pushes element below left and right
	floating elements
	</li>
	<li>
	<strong>inherit;</strong> - Element inherits clear value from
	its parent
	</li>
	</ul>
	</td>
	</tr>
	</table>
	</main>
	</body>
	</html>