How to Override CSS class?

Question

I am working a component based framework where in component below css class applied which is changing background color of component

background-image: linear-gradient(rgb(119, 44, 44) 0%, rgb(204, 204, 204) 100%);

But i have want this background color of component

background-color: #f2dede;

What changes i have to do in above CSS class so it will apply background-color: #f2dede;

If i am replacing background-image class from background-color its not working — Subodh Joshi
– Subodh Joshi, Commented Feb 13, 2015 at 6:27
background-image is not a class but a property. You cannot replace background -image property with background-color property. They are separate entities. — Kaustav Banerjee
– Kaustav Banerjee, Commented Feb 13, 2015 at 6:29
simply use background:#f2dede !important;.. I dont recommend using !important as a good approach, but try.. — G.L.P
– G.L.P, Commented Feb 13, 2015 at 6:31

Community · Accepted Answer · 2020-06-20 09:12:55Z

all you have to do to overwrite a css property is to write it again but after the declaration. The browser reads you style file from the top to the bottom and applies only the last declaration of the same element.

.catsandstars {
  width: 200px;
  height: 200px;
  background-image:  url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif");
}

<div class="catsandstars"></div>

and here is how you properly overwrite it

.catsandstars {
  width: 200px;
  height: 200px;
  background-image:  url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif");
  background-color: transparent;
}
.catsandstars {
  background-image: none;
  background-color: #f2dede;
}

<div class="catsandstars"></div>

The !important exception

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.

Some rules of thumb

Never use !important on site-wide css.

Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).

Never use !important when you're writing a plugin/mashup.

Always look for a way to use specificity before even

considering !important

Sujata Chanda · Accepted Answer · 2015-02-13 06:29:57Z

3

Use this in css:-

.yourClass {
  background-image: none !important;
  background-color: #f2dede;
}

answered Feb 13, 2015 at 6:29

Sujata Chanda

3,3952 gold badges23 silver badges36 bronze badges

1 Comment

Ruan Mendes Over a year ago

Upvoted but you should avoid !important if you can, it's a crutch. It's better to understand CSS specificity developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Kawinesh S K · Accepted Answer · 2015-02-13 06:41:41Z

0

CSS

.className{
  background-image: none;
  background-color: #000;
}

Try to have this code at the end of your CSS file so that your class gets overrided.

Note : .className refers to the class identity for which the background-image has been given.

edited Feb 13, 2015 at 6:41

answered Feb 13, 2015 at 6:36

Kawinesh S K

3,2301 gold badge19 silver badges30 bronze badges

Comments

Pabitra Patra · Accepted Answer · 2015-02-13 06:33:53Z

-1

.yourClass {
  background: #f2dede !important;
}

answered Feb 13, 2015 at 6:33

Pabitra Patra

193 bronze badges

Collectives™ on Stack Overflow

How to Override CSS class?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related