Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make CSS file more important than another CSS file? [closed]

Tags:

I want all the Classes,Tags and Ids within css.css overwritten over bootstrap.min.css without repeating the Classes,tags and Ids of bootstrap.min.css.

<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css" rel="stylesheet"> 
like image 905
Mansour Alnasser Avatar asked Oct 23 '12 11:10

Mansour Alnasser


People also ask

How do you make a CSS file important?

The ! important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the ! important rule, it will override ALL previous styling rules for that specific property on that element!

Which CSS file has highest priority?

Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page.

Is it better to have one or multiple CSS files?

Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests.


2 Answers

There is no such magic. CSS has its own principles, such as the cascade, and you cannot switch them off.

You can place the reference to css.css after the reference to bootstrap.min.css, but this is just one factor in the process of resolving how CSS rules will be applied. Adding !important, which is generally a symptom of wrong design, is just yet another factor: an !important rule in an earlier file may override your !important rule, if its selector has higher specificity.

To override CSS rules, you need to analyze the rule you wish to override and set up a rule that “wins”, by the cascade principles.

like image 92
Jukka K. Korpela Avatar answered Sep 22 '22 17:09

Jukka K. Korpela


Simple, include the more important CSS file last.

like image 41
Rob Forrest Avatar answered Sep 24 '22 17:09

Rob Forrest