What styles will each paragraph receive?

p {
  color: orange;
  font-family: sans-serif;
}
.info-paragraph {
  color: blue;
  background-color: orange;
}
#main-paragraph {
  font-weight: bold;
  color: green;
}
<p>Paragraph</p>
<p class="info-paragraph">Paragraph</p>
<p class="info-paragraph" id="main-paragraph">Paragraph</p>

Cascading priority: Importance

Your browser assigns different priorities to CSS depending on the type of selector.

• Inline CSS - Most Important
• ID selector
• Class selector
• Element selector - Least Important

Cascading priority: Specificity

Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.

.main .sale .clearance p { /* Most specific */
  color: red;
}
.header .title p {
  color: green;
}
.footer p { /* Least specific */
  color: blue;
}

Cascading priority: Source order

The tie-breaker is rule order. Rules lower in the file overwrite rules higher in the file.

a {
  background-color: yellow;
}
a {
  background-color: teal;
}
a { /* This rule wins */
  background-color: black;
}