Web Development Tutorial for Beginners LearnCode.academy #2

<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<link href="styles/main.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<h1>My Website</h1>
		<ul>
			<li>Home</li>
			<!-- relative links: links that are in the same folder as the one you're in -->
			<li><a href="page2.html">Page 2</a></li>
			<li><a href="page3.html">Page 3</a></li>
		</ul>
		<h2>This is my homepage</h2>
		<p>And all of my homepage content</p>
	</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
	<head>
		<title>Page 2</title>
		<link href="styles/main.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<ul id="nav">
			<li><a href="index.html">Home</a></li>
			<li>Page 2</li>
			<li><a href="page3.html">Page 3</a></li>
		</ul>
		<h2>This is Page 2</h2>
		<p>And all of my Page 2 content</p>
		<p class="secondary">And all of my Page 2 content</p>
		<p>And all of my Page 2 content</p>
	</body>
</html>

<!-- The difference between id and class is that with id, you can only have one of it per page
while with class, you can have the same class for multiple elements in a page -->
-----------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
	<head>
		<title>Page 3</title>
		<link href="styles/main.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="page2.html">Page 2</a></li>
			<li>Page 3</li>
		</ul>
		<h2>This is Page 3</h2>
		<p>And all of my Page 3 content</p>
	</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------
/* selector: what you wanna style */
body
{
/* rules: styles for the selector */
	background: #999;
	font-family: arial;
}

h1, h2, li
{
	color: #555;
}

a
{
	color: green;
}

p
{
	background: #666;
	color: white;
	/* it pads (definition of space between the element border and element content) all sides of whatever element your styling */
	/* you can just have one number */
	/* you can also have tow numbers, top bottom is the first number and left right is the second number */
	/* you can also do 4 numbers, and it would go clockwise: top, right, bottom, left */
	padding: 10px;
}

/* "." are class */
.secondary
{
	background: none;
	color: #777
}

/* "#" are id */
#nav
{
	background: red;
	color: white;
}

/* you can override styles by putting the same element to style under it, and whatever's lower
will be shown */