/* Later rules override earlier ones (when specificity is equal) */

.button {
  background-color: blue;
}

.button {
  background-color: red;
  /* Red overrides blue because it comes later */
}

/* Higher specificity overrides lower specificity */
div {
  color: black;
}

.important {
  color: red;
  /* Class selector has higher specificity */
}

/* !important has highest priority (avoid using!) */
.button {
  background-color: blue;
}

.button {
  background-color: red !important;
  /* !important overrides everything */
}

/* Cascade example */

/* 1. Browser default (lowest priority) */
/* Links are usually blue */

/* 2. External stylesheet */
a {
  color: purple;
}

/* 3. Later rule in same file */
a {
  color: green;
  /* Green overrides purple */
}

/* 4. More specific selector */
a.active {
  color: red;
  /* More specific than just 'a' */
}

/* 5. Inline style (high priority) */
/* <a style="color: orange;">Link</a> */

/* 6. !important (highest, avoid!) */
a {
  color: black !important;
}