CODEWITHSUNDEEP
htmlcss
user3595632
user3595632

Reputation: 5730

How can I override css property?

Let say that I have a global css file, global.css :

.my-class {
    background-color:red;
}

And I need a specific css file, specific.css, just for a certain html file. And this html file also has class named my-class. In this time, however, I want to make this html's background color as blue. How can I do that in specific.css file?

Upvotes: 0

Views: 63

Answers (2)

Dryden Long
Dryden Long

Reputation: 10190

There are several ways to do this.

Option #1 is to make sure your specific.css file is included after your global one. this will cause the styles to overwrite.

For example:

<link href="global.css" rel="stylesheet" type="text/css" />
<link href="specific.css" rel="stylesheet" type="text/css" />

Option #2 is to leverage CSS specificity.

See here for more info on that: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Option #3 is to use !important in your style that you want to take precedence.

This isn't highly recommended, but will work if the above two options fail to get you what you need.

Upvotes: 4

Patrick Bell
Patrick Bell

Reputation: 769

If you define the other element's background-color in a CSS file that was loaded AFTER global.css (e.g. load specific.css after global.css in your HTML markup). You can also use the !important tag to overwrite ALL other defined styles, but typically you won't need this. Its called cascading style sheets for a reason.

Upvotes: 0

Related Questions