CODEWITHSUNDEEP
htmlcss
Don P
Don P

Reputation: 63718

Turn all text on any page to a specific color

How can I turn all text on a page to a specific color?

  1. Content (HTML and CSS) is user generated, so I cannot control classes for specific elements.

  2. Since the page's html, classes, etc can vary tremendously (user generated), I can't write CSS that will target elements individually.

Originally, I had tried to use !important on the body like below, but forgot that any targeted CSS would override it.

body {
  color: white !important;
}

Is my only option to use javascript to apply an inline style to every element?

Upvotes: 1

Views: 538

Answers (3)

Francisco Presencia
Francisco Presencia

Reputation: 8860

From the statement user generated, we can see that users will be able to add some inline styles, even !important ones. Then, your only solution is javascript (jquery example):

$("*").css("color", "#FFF");

Or filter the html to remove the styles with HTMLPurifier, which you should be using to filter the javascript anyway (to avoid MANY kind of attacks on your web.

OLD ANSWER:

Use this within your html's head (not in the stylesheet) because it has preference over the styles in separated files:

<style>
* {
color: #FFF!important;
}
</style>

Upvotes: 1

Ishan Jain
Ishan Jain

Reputation: 8171

You can use Universal selector (i.e *) selector to select any element on page:

html * {
      color: white !important;
    }

OR You can use directly use like this:

* {
    color: white !important;
  }

Upvotes: 3

pavel
pavel

Reputation: 27072

Use * selector, not only body.

* {color: #fff !important}

Upvotes: 7

Related Questions