CSS Tutorial for Beginners LearnCode.academy #5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap Layouts</title>
		<style>
			p
			{
				color: green;
			}
		</style>
		<link href="styles/main.css" rel="stylesheet" type="text/css" />
		<link href="styles/other.css" rel="stylesheet" type="text/css" />
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	</head>

	<body>
		<p style="color:green" id="main">Hello World</p>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	</body>
</html>

<!--
	Bootstrap allows you to make responsive layouts, and responsive layouts are
	layouts that act responsively to the users browser and/or device

	Style always goes on the top, and the actual coding goes on the bottom
	so that the style and webpage show first and all of the functionality comes
	last

	What a container class does it gets your elements centered
-->
-------------------------------------------------------------------------------------------------------------------------------
p
{
	color: blue;
}

/*

How Specifity Works
IDs are the most specific of them all, so if you were to make an element into an ID
that overrides everything else. Also, the more down you go in CSS the more specific it gets,
but even if an ID is at the top and an element uses it it overrides everything.

It's easier sometimes to have separate stylesheets for grouping purposes.

The further down something is, it'll override everything

What'll override everything is styling right in the element in HTML

*/
-------------------------------------------------------------------------------------------------------------------------------
p
{
	color: red;
}