7

I am working with an internal administration tool that runs on Javascript that has the following in its core CSS file:

* {
    font-family: Helvetica, Verdana, Arial, sans-serif;
}

Based on my research, this would be the lowest level of specificity. Anything would override that setting.

My goal is to change the font on the entire page to improve legibility. I am using Python / Selenium webdriver with Firefox to modify the tag's style setting with this Javascript, which results in the following inline HTML:

document.getElementsByTagName("body")[0].style = "font-family:Lucida Fax;";

<body style="font-family:Lucida Fax;" >

The change is propagating to the sheet. However, the font doesn't change. Under the "Computed" view, I see the following:

font-family: Helvetica,Verdana,Arial,sans-serif;
------------------------------------------------
*             > Helvetica,Verdana,Arial,sans-serif   core.css;
BODY[1].style > Lucida Fax                           element;

When I disable the * CSS property in the Firefox Inspector after making the change, the font change will occur. So something is overriding my inline style change.

I am in a blackbox environment as an end user, so I can't account for everything happening.Could this be caused by an actively-running Javascript that is forcing the stylesheet to take precedent over inline styles?

Dai
  • 141,631
  • 28
  • 261
  • 374
MavenACTG
  • 173
  • 9
  • 4
    Styles that are inherited from the parent have lower precedence than `*` – 4castle Jan 19 '17 at 17:59
  • 2
    Avoid using the `*` selector as it's expensive for browsers to evaluate - if you want to set a font for an entire page, rely on inheritance instead by setting it on the `body` element in CSS (`body { font-family: foo; }`). – Dai Jan 19 '17 at 17:59
  • @Dai I understand that but I am an end user working with a developer's style sheet. Do you have a way I can override the style sheet assuming I do not have access to the source code? – MavenACTG Jan 19 '17 at 18:03
  • @MavenACTG We would need to see the entire page and stylesheet. But you could also use the `!important` keyword if you need to make spot-changes. – Dai Jan 19 '17 at 18:04
  • 2
    To override the style just add another ` – 4castle Jan 19 '17 at 18:05
  • @4castle I will give that a go. – MavenACTG Jan 19 '17 at 18:08
  • @4castle That worked, how do I give you credit for the answer? New here. :x – MavenACTG Jan 19 '17 at 18:17
  • 1
    @MavenACTG Pointy can get credit. [Upvoting the comment](http://meta.stackoverflow.com/a/341259/5743988) is fine. – 4castle Jan 19 '17 at 18:40

1 Answers1

11

The "style" property on the <body> tag only affects content that's in the body directly. All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.)

What I've seen recommended instead is to set everything to "inherit" and then apply the setting to the <body>:

body { font-family: Whatever; }
*, *::before, *::after { font-family: inherit; }

That allows you to have overrides for some elements (like various sorts of form widgets or whatever).

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • @Dai he means in so far as overriding a matching CSS rule is concerned. Though, the wording could be improved. – canon Jan 19 '17 at 18:01
  • 1
    @Dai not when there's an explicit CSS rule that matches all elements in the DOM. (Edited to clarify however.) – Pointy Jan 19 '17 at 18:01
  • I may not have been clear on some critical details. I am making changes to the instance of the web page. I don't have access to the CSS file that is creating the page. I want to modify the instance of the page from an automation / scripting position. I can't change the source. – MavenACTG Jan 19 '17 at 18:05
  • @Pointy Ah, thank you for clearing that up. I'll remove my comment. – Dai Jan 19 '17 at 18:05
  • 1
    @MavenACTG You *can* change the CSS if you really want to; you can do it from JavaScript. You can override the CSS in the file by creating a new ` – Pointy Jan 19 '17 at 18:08
  • The question is answered by the root, and a Javascript solution for adding a style tag can be found here: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript – MavenACTG Jan 19 '17 at 18:40