Adding a CSS Rule ?

I'm new to creating my own userstyles and unexperienced with css.
I added a CSS rule with the Firefox developer tools (inspector, Rules tab) and it worked easily.
To be more precise I clicked on the + button and added 2 lines in there.

Now I would like this new rule to stay when I refresh the page, go in subdirectories of the domain or restart the browser so I thought creating a userstyle would be the way to go. Am I right on this ?

If so, what's the process for simply adding a CSS rule ?

Comments

  • Now I would like this new rule to stay when I refresh the page, go in subdirectories of the domain or restart the browser so I thought creating a userstyle would be the way to go. Am I right on this ?

    Yes.

    If so, what's the process for simply adding a CSS rule ?

    You'd copy the code you wanna apply, select "write a new style", paste it in the editor, and then specify where you wanna apply it with rules in the "Applies to" section. There's a select element where you can specify "URL", "URLs starting with", "URLs on the domain", or "URLs matching the regexp". They're all different syntax, which are useful for different things. The simplest and most common is "domain". You'd select "URLs on the domain" and in the field to the right, specify the base domain, like:

    image

    Then just name and save.

    Keep in mind that you may or may not need extra specificity to work on page load. Simplest specificity is adding !important, like:

    .your-code{color:#000!important;}

    but you can also add specificity by adding a parent to the selector, like:

    body .your-code{color:#000;}
Sign In or Register to comment.