Example styles

Two small styles to try !important with, and this page to try them on.

Test boxes

Box 1Turns orange with the first example.

Box 2Disappears with the second example – or pick it yourself: the ! icon › Pick an element on the page, click this box, Hide.

1. An orange box – UserCSS

orange-example.user.css

Click the ! icon › Manage styles… › Import ▾ › From an address… and paste https://daniel.snor.cz/important/examples/orange-example.user.css – or download the file and use From a file….
Come back to this page: box 1 is orange and the ! icon in the toolbar turns orange too.

The style says itself where it applies, and its colour is a setting: change --accent at the top of its CSS in the manager.

2. Hide a box – plain CSS

hide-example.css

Import it the same way, from https://daniel.snor.cz/important/examples/hide-example.css or from the file.
Plain CSS says nothing about where it applies, so the manager asks for it: under Where it applies, + add a site, type daniel.snor.cz.
Come back to this page: box 2 is gone.

Replace instead of on top

With a style on, choose Replace in the ! menu. The menu lists this page’s own stylesheet, site.css, unticked: it is switched off, so only your styles remain. Tick it, or switch back to On top, and the page’s own look returns.