freeCodeCamp/guide/english/certifications/responsive-web-design/basic-css/override-all-other-styles-by-using-important/index.md

title

title
Override All Other Styles by using Important

Override All Other Styles by using Important

---

Problem Explanation

You can override all other styles in CSS by using !important.

This override is considered the most important and takes precedence over the rest.

The list of most important to least important is as follows:

1. important (!important)
2. inline styles
3. id declarations
4. class declarations

Here is an example of how to write/apply !important:

color: black !important;

To apply these in context and see !important take precedence, here is an example:

<style>
  body {
    font-family: Helvetica;
    color: purple;
  }
  #violet-text {
    color: violet;
  }
  .black-text {
    color: black !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="violet-text" class="black-text blue-text" style="color: black">Example Text</h1>

This result would end in Example Text being black because of !important added to color: black.