CODEWITHSUNDEEP
cssfont-size
A. Kriegman
A. Kriegman

Reputation: 660

How to override other CSS styles?

I'm using this Chrome extension called Stylus that allows me to use custom CSS sheets for any website. I use this to make the font larger for easier reading. Here is my code:

body {
    font-size: large;
}

Unfortunately, this gets inconsistent results. On some websites it makes the font larger as desired, but on many websites it has no effect, or worse it only affects the font size in the sidebar. Is there a way I can my code take priority? I tried using !important but that still had inconsistent results.

Upvotes: 1

Views: 1265

Answers (2)

SARAN SURYA
SARAN SURYA

Reputation: 554

actually creating any style property, below another property will actually override it,

example:

body{
          font-size: large;
          color: white;
     }

      /*Now creating a same style property will override the above style in the  particular element*/  

 h1{
     font-size: small;
     color: grey
  }
     /*The styles from the body will be overridden for the h1 tags*/

     /*For global */

 *{
       color: pink
  }

     /*This above block will override the styles declared for body*/

All of this works because CSS will follow a top down approach so the styles declared in the bottom will be considered while rendering,

Other method is to use Inline CSS, they will override all styles.

Upvotes: 0

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

Try it with * it means all so the font-size will be applied to all but in that case of style is not being applied to all websites may be is the problem of an extension or try to update your extension and activate it. and the following is the code of CSS to apply the same font-size to all elements in the website

*{
    font-size: large;
}

and you should know that there are many websites reject those extensions running on them because of the security issues

Upvotes: 3

Related Questions