CODEWITHSUNDEEP
htmlcss
Subodh Joshi
Subodh Joshi

Reputation: 13522

How to Override CSS class?

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;

Upvotes: 2

Views: 22184

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

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

Upvotes: 5

Kawinesh S K
Kawinesh S K

Reputation: 3220

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.

Upvotes: 0

Pabitra Patra
Pabitra Patra

Reputation: 19

.yourClass {
  background: #f2dede !important;
}

Upvotes: -1

Sujata Chanda
Sujata Chanda

Reputation: 3395

Use this in css:-

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

Upvotes: 3

Related Questions