CSS is !important

JP de Vries
Sep 4, 2016 · 7 min read
Image for post
Image for post
A cascade of windows with a select few uniquely ajar

When !important was first introduced in CSS1, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS2
The Important CSS Declaration How and When to use it

However, for balance, an “!important” declaration (the delimiter token “!” and keyword “important” follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
W3C Recommendations — !important rules


Visually Hidden

Font Size

With an HTML form, CSS styles, and a little JavaScript we allow users to set the font size they prefer

High Contrast Mode

Reducing Motion

Font Family

Print Styles

It is unlikely that you are already using a filter on body so !important may be unnecessary here

To Hack Inline Style



Tools & tips that may help you build your next web…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store