CSS Cascading Order Example

<!Doctype HTML>
<html>
<head>
	<title>Cascading Order</title>
	<link rel="stylesheet" type="text/css" href="/style.css">
	<style>
	h1{
		font-size: 36px;
	}
	h2{
		font-size: 30px;
	}
	p{
		font-size: 16px;
	}
	</style>
</head>
<body>
	As you see, internal style sheet is defined after linked/external style sheet, therefore it will override the styles for h1, h2 and p. The styles defined in the internal style sheet will be preffered. Also an inline style is defined for p element, it will override both external and internal style sheets. And will use the styles defined within the paragraph element.
	<h2>Cascading Order</h2>
	<h3>CSS styles are linked in the head section</h3>
	<p style="font-size:12px; background:#999; color: #fff;">After adding a link of the style sheet, we can use the defined classes or ids in the HTML elements to have the result.</p>
</body>
</html>