.note { color: gray; }

/* Because this is lower, it will “win” the tie. */
.warning { color: red; }
<!DOCTYPE html>
<html>
	<head>
		<title>Cascade</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<p class="note">This paragraph will be gray, with just the “note” class.</p>
		<p class="warning note">This paragraph will be red though, with both classes.</p>
		<p class="note">This paragraph will also be gray, with just “note” again.</p>
	</body>
</html>