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

Question

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 :)

Hi guys - thanks for your answers, both of you. So, in practice, how would I do this (I'm new to css...) For instance, if I used option one from Shehabix in my erikstyle.css, should it be referenced in the code like this: <someclass div kbd>SOMETEXT</someclass div kbd> if I wanted to change only the color...? Can't get that to work, so I'm probably not doing it right... — Erik Lassen
– Erik Lassen, Commented Feb 1, 2015 at 21:06
can you please add your original piece of code with it's 2 parent tags? — Shehabic
– Shehabic, Commented Feb 1, 2015 at 22:53
Hi Shehabix - thx for the update, I will give it a shot tonight (Danish time :) ) — Erik Lassen
– Erik Lassen, Commented Feb 2, 2015 at 9:05

Shehabic · Accepted Answer · 2015-02-01 22:56:20Z

1

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

edited Feb 1, 2015 at 22:56

answered Feb 1, 2015 at 20:48

Shehabic

6,89711 gold badges56 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erik Lassen Over a year ago

Thanks @Shebabix - worked like a charm - and thanks for the reading material as well :)

PeeJay · Accepted Answer · 2015-02-01 20:57:26Z

1

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

answered Feb 1, 2015 at 20:57

PeeJay

3234 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related