Try it Yourself: CSS Specificity

CSS Specificity

<!DOCTYPE html>
<html>
<head>
<style>
/* specificity (1, 0, 1) */
#main p {
  color: red;
}

/* specificity (0, 0, 1) */
p {
  color: blue;
}
</style>
</head>
<body>

<div id="main">
  <p>This paragraph is styled by two rules.</p>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
/* specificity (1, 0, 1) */
#main p {
  color: red;
}

/* specificity (0, 0, 1) */
p {
  color: blue;
}
</style>
</head>
<body>

<div id="main">
  <p>This paragraph is styled by two rules.</p>
</div>

</body>
</html>