<!doctype html>
<html>
	<head>
		<title>Combinations and groups</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<h2 id="first-heading">This heading will be black</h2>
		<p class="warning">This paragraph with be red.</p>
		<blockquote class="warning">This blockquote will black, despite having the same class.</blockquote>
		<h2 id="second-heading">This heading will be blue</h2>
		<footer>
			<p>Just another paragraph, nested in a footer.</p>
		</footer>
	</body>
</html>
index.html
			/* Paragraphs with the class `warning`. */
p.warning { color: red; }

/* The `h2` isn’t really necessary here… */
/* Since the `id` is already unique! */
h2#second-heading { color: blue; }

/* This applies to both selectors! D.R.Y. */
blockquote,
footer {
	background-color: lightgray;
}
style.css