CSS in the end of the page doesn't affect all of it

Question

I added this code right before the end of the body tag in the facebook.com page (not logged in):

<style>
  * {
    font-family: Times New Roman !important
  }
</style>

But some text of the website (including "Connect with friends and the world around you on Facebook.") didn't change. Why?

set font-family with * is wrong. you have to set it to tags like
or class — Majid Azarniush, Aug 25 '19 at 08:07
@MajidAzarniush there is nothing wrong in setting font-family to *all* the elements. — Temani Afif, Aug 25 '19 at 08:33

score 0 · Answer 1 · answered Aug 25 '19 at 08:19

Adding !important may not always work as expected. You also need to check the element level CSS as well. This is in accordance with the order of precedence for CSS.

See the example below which shows how precedence works in CSS.

* {
  font-family: Times New Roman !important;
  color: red !important;
}

.different {
  font-family: Arial, Helvetica, sans-serif !important;
  color: green !important;
}

<p>
  This is para 1
</p>

<p class="different">
  This is para 2
</p>

The style which overrides mine is not element-level. It is applied to `._3ma` class. — Kamran İbrahimov, Aug 26 '19 at 17:24

score -3 · Answer 2 · edited Aug 25 '19 at 10:41

-3

You should add your style tag after the <head>.

edited Aug 25 '19 at 10:41

Wai Ha Lee

8,598
83
57
92

answered Aug 25 '19 at 07:45

leilankn

1
1

CSS in the end of the page doesn't affect all of it

2 Answers2