Custom CSS Per Domain

You have likely already noticed a website that doesn’t display everything how you would like.

For Chrome (and browsers based on Chromium, such as Brave), there is an add-on “Custom CSS Per Domain” that lets you fairly easily insert your CSS styling for an element on that website’s page.

Click on Custom CSS Per Domain extension, from the browser tab showing the Domain you want to modify

Tag: is for your categorizing your CSS rules; no effect on the styling.

CSS: include all selectors, brackets, semicolons for proper CSS

Example in CSS field:
p { background-color: tan; }
H1 { border: 2px solid green; }

This works in CSS field too: 
div.ProfileWrapperStyled-sc-hquy9q-3:has(button[data-test-status="active"]) {
    background-color: tan !important;
    height: fit-content !important;
}

Refresh the page to see the results

For other browsers, search for extensions that do the same thing. They exist, I just haven’t tested them.

How to Find the Correct Selector

I always use the browser’s Inspector to make sure I have the correct CSS selector, and that my CSS does what I want. This is a temporary way to change the CSS, but has the advantage that you can see the changes immediately, and can see what CSS is higher precedence over yours if your changes don’t show up.

Adding the CSS Rule

When I have CSS Selector correct, and the CSS styling changes correct, you can right-click the rule in the Inspector, pick “Copy rule”; that is the rule you paste into the Custom CSS Per Domain extension.

In this image, I added a tan background to P (paragraph) and a green border to H1 (heading level 1, the page title). I also added the instructions for the Chrome extension.