Style Override Technique

p { 
   font-size: 24px !important; 
}

The !important rule at the end of a value will override any other style declarations of that attribute, including inline styles.

Comments

mansur

# September 8, 2009

Wow… I learn new thing here… TQ for the snippet..

hanif kasai

Permalink to comment# April 16, 2015

Yo man really cool. I agree with mansur. Learnt a new evil technique.
sondra

Permalink to comment# April 19, 2016

I am trying to clean up a mess that was created from Framemaker and trying to override a bunch
of styles using a style sheet.

I tried using the following code but it seems to ignore it

ul.B-Bullet1 {
list-style-type: circle !important;
font-family: “Arial”, Verdana, sans-serif;
color: #17202A;
margin-left: 30px !important;
font-size: 100%;
}

ul.B-Bullet2{
list-style-type: square !important;
font-family: “Arial”, Verdana, sans-serif;
color: #17202A;
margin-left: 30px !important;
font-size: 100%;
}

what am i doing wrong?

Chris

# May 18, 2011

It’s evil!!!
Code clean and you dont have to do this.

Joachim

# December 5, 2012

Chris, it’s not evil but sometimes neccessary. Imagine you use something like Joomla and need to chnage CSS styles of a module. If they update the module all is gone. But if you extract the styles you want to edit and “import” them, you can attach your onw CSS with the changes and most times you will have no trouble updating :)

Abhinav Banerjee(India)

# September 5, 2013

how to overrid the color of sticky color style:
For Example:
.sticky{
color:#000;
}
.nav{
color:#fff;
}
I get #fff as color even when sticky class is added in sticky navigation.
Please Help!!

brute11k

Permalink to comment# April 7, 2015
You should write next CSS statement if this navigation element contains both classes.
```
.sticky.nav {
  color: #000;
}
```
If you need to override the navigation element inside sticky element:
```
.sticky .nav {
  color: #000;
}
```