CSS !important

A trump card, not a habit

When two declarations target the same property on the same element, CSS picks a winner with origin, specificity, then source order. !important jumps that queue. The declaration with!important beats a normal one, even if the normal one is an id selector written later.

That sounds useful. It is also how stylesheets become impossible to override. Harbor studio does not need it on a heading color. You almost always want a more specific selector, or a class that means what you mean, or a later rule in the same file.

How it looks

Write the value, a space, !important, then the semicolon. It attaches to one declaration, not to a whole rule. Spelling it ! important still works; keep it tight so people see it.

<style>
  body {
    font-family: system-ui, sans-serif;
    background: #f0f9ff;
    margin: 1.25rem;
  }
  #hours {
    color: navy;
  }
  p {
    color: teal !important;
  }
</style>
<h1>Harbor studio</h1>
<p id="hours">This paragraph is teal. !important on the tag rule beats the id.</p>

An id is more specific than a tag. Without !important, #hours would win and the text would be navy. With it, the tag rule wins. That is the trick — and the mess. The next person who needs navy has to write another !important or edit this line. Specificity wars start here.

Why to avoid it

!important does not make CSS “more true.” It hides the cascade so the next rule cannot speak quietly. Components, utilities, and third-party widgets all need a way in. If your button color is important, their hover state may need to be more important. The file grows a stack of flags.

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #0c4a6e;
    background: #f0f9ff;
    margin: 1.25rem;
  }
  .card p { color: #475569; }
  .card p.notice {
    color: #0d9488;
    font-weight: 700;
  }
</style>
<article class="card">
  <h1>Harbor studio</h1>
  <p>Regular copy stays slate.</p>
  <p class="notice">Desks free after 14:00 — a class won, not a flag.</p>
</article>

When it appears anyway

You will still see !important in the wild. Knowing why it showed up is more useful than pretending it never should.

• User stylesheets and accessibility overlays. A visitor (or a browser extension) may force font size or contrast. Those rules often use !important on purpose so a site cannot shrink the type back.
• Utility classes. Some libraries ship .hidden { display: none !important; }so the utility beats a component’s display: flex. That is a design choice of the library, not a beginner pattern to copy by hand.
• Third-party widgets. A booked calendar iframe or a chat bubble may lock colors. You override from the outside only if the vendor left a hook. Fighting with more flags is brittle.
• Inline style vs author sheet. An inline style="" already beats a class. An author !important in a stylesheet beats a normal inline style — another reason the flag shows up in desperate overrides.

<style>
  body {
    font-family: system-ui, sans-serif;
    background: #f0f9ff;
    margin: 1.25rem;
    color: #0c4a6e;
  }
  .chip {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 999px;
  }
  .chip.is-off {
    display: none;
  }
</style>
<h1>Harbor studio</h1>
<p>The sold-out chip is hidden with a class, not with !important.</p>
<span class="chip is-off">Sold out</span>
<span class="chip">Tide desk</span>