LinuxQuestions.org - [SOLVED] Local CSS file in Firefox

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - Local CSS file in Firefox (https://www.linuxquestions.org/questions/programming-9/local-css-file-in-firefox-4175436740/)

Local CSS file in Firefox

Hi. I want to change fonts on some websites for me in Firefox. I created userContent.css file and then I go to some page, open css file and take class of "p" or "div". Then I write a rule for this in userContent.css. For example page http://www.osnews.com/ . It has

Code:

<div class="newscontent1">                                

  <a href="/topics/9"><img src="http://www.osnews.com/images/icons/9.gif" alt="Linux" align="left" class="timg" title="Linux" /></a>

  Here's a topic guaranteed to start controversy. Which Linux distribution is best? It all depends on your criteria for judging. Even then the topic is highly subjective. Here are a few nominees for "best distro" in specific categories.

</div>

I want to change font in this class so I add to userContent.css:

Code:

.newscontent1 {

  font-family: mono;

}

saved changes and reloaded OSNews page. No changes on the page... I read some local CSS examples and they look as simple as I did. And AFAIK local CSS file has higher privileges than remote. Mine doesn't work. What am I doing wrong?

This style is set by webmaster as "important", so to override you also need to set it "important" (to be more than webmaster's), like that:

Code:

.newscontent1 {

  font-family: mono !important;

}

When you reload the page, the persistent information seems to override your CSS- as it should . This is expected behaviour and anyway local css lasts only for the current session.

OK

eSelix, thanks, solved.
Is there a way to specify particular website for which the rule must be applied (and for no other)?
Some websites just have "<p></p>" without class or anything else unique.

Yes, you can write your rules inside this special syntax

Code:

@-moz-document url-prefix("http://somesite.com/")

  {

  p

    {

    font-family: my-better-font !important;

    }

  }

Instead "url-prefix" (where taking into acoount are all addresses started with specified text) you can use "domain" (so only domain need to match), "url" (where exact address must match) or "regexp" to specify regular expression.