CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Erik Lassen
Erik Lassen

Reputation: 57

Using two external css-files for one html/php page

For my website I want to use two css-files, one which is the Twitter Bootstrap (bootstrap.css), and one of my own (erikstyle.css). The reason for doing this is that for the most part, I want to use the bootstrap styles, but I want the freedom to make minor changes to the style without altering the original file.

So, a sample page has the following:

<link rel="stylesheet" type="text/css" href="../styrkesite/Bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../styrkesite/css/erikStyle.css"/>

And I'm using the style 'kbd' from bootstrap.css

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  etc.
}

and I have altered the color in erikstyles.css like this:

kbd
{
  color: red;
}

Problem is, the erikstyle.css style-change (i.e. the color) doesn't kick in. If I, however, change erikstyle.css to

   kbd
    {
     color: red !important;
    }

it works. So, I know that both files are referenced properly and are working as intended, but I would like to avoid having to add the !important for each and every alteration...

As far as Google says, the order of the css file references on the page makes sure that in case of any conflicting style elements (in this case the color), the style element in the css-file referenced last would take precendence (i.e. the color from erikstyle should be used, and the remaining elements should be taken from bootstrap)

I've tried adding 

title="persistent"

and

title="preferred"

to the css-file reference, as suggested elsewhere, but to no effect.

Anyone has any leads for this?

Thx :)

Upvotes: 0

Views: 1352

Answers (2)

Shehabic
Shehabic

Reputation: 6877

Make your selector stronger for example give it a full path like

.someClass div kbd {
    color: red;
}

or something like:

kbd.someClass {
    color: red;
}

or

kbd#someId {
    color: red;
}

Update:

in your case your HTML should look something like this:

<kbd class="someClass" id="someId"></kbd>

use class or id

I also highly recommend that you read more about HTML and CSS

w3schools would be a good start:

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

Upvotes: 1

PeeJay
PeeJay

Reputation: 323

Using !important is not a good option, as you will most likely want to override your own styles in the future.

I second @shehabix's answer, make your selectors stronger and there will be no need to override base styles.

Here are some best practices :

Always load custom css after base css file (not responsive).

Avoid using !important if possible. That can override some important stylings from base.

Always load bootstrap-responsive.css after custom.css if you don't want to lose media queries.. - MUST FOLLOW

Upvotes: 1

Related Questions