2

This question says css files load in the order they're called. But I have three css files, 2 from a cdn and one local one, with the local ones being called last. The cdn ones are taking precedence over the local css. I'm assuming this is because the nonlocal css sheets are taking a bit longer to load. How can I get the local css's rules to take precendence?

I've tried 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">

and 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'style.css'));
    });
</script>
<link rel="stylesheet" href="style.css">

Edit: The problem was that 

.panel-head > .panel-default

in the cdn files was taking precedence over

.panel-default
Community
  • 1
  • 1
zzxjoanw
  • 374
  • 4
  • 16
  • 3
    It's probably due to the specificity of your rules and them being outweighed by the bootstrap rules. – j08691 Mar 02 '15 at 17:48

1 Answers1

0

The browser reads the code from top to bottom in CSS. E.G. You can create the same named div #ID twice with the same exact name, yet, the one that is furthest down the page, or last, is what that div is actually going to display on your html page.

You need to take your local style.css and put it first so the page will load it first. Hope this helps. Let me know if I'm not clear or this is not the answer you needed and I can help further.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
tommydevs
  • 147
  • 2
  • 11
  • Are you sure? Both bootstrap.min.css and style.css have a rule for .panel-head > .panel-default, and the style.css rule is taking precedence now. – zzxjoanw Mar 02 '15 at 19:17
  • It seems like if you happened to be using a CMS or pre-developed application(s) and merging them together and this just happened to take place by chance... In my opinion I'd do one of two things. ---I'd try adding !important after the CSS rule I wanted to take effect in the correct CSS file and leave the other one as is. This works in most cases. --- Alternatively, more cumbersomely and possibly may pop an error up or cause conflict but is worth a shot is to change the class name to something unique and do a search and replace for all *.extension files within the directories required. – tommydevs Mar 02 '15 at 19:28
  • E.G. .class { width:20px; height:20px; padding:0px 5px 0px 5px !important; } – tommydevs Mar 02 '15 at 19:44
  • !important should work, it always does. Did it not? You know you could also just copy the bootstrap class and paste it over your style.css. When it takes precedence, it will call the same results. Hope I've been somewhat helpful. Good luck m8. – tommydevs Mar 03 '15 at 06:03
  • It would have worked, I'm sure, but I thought it was good practice to avoid using important. – zzxjoanw Mar 03 '15 at 10:05
  • Nope not at all. You don't want to *overuse it* just like you don't want to abuse absolute positioning, or overuse tables, etc. Using it once to a few times on a decent sized site is just fine. Considering the amount of time you've tried to find an alternative as well as I assume you're a competent developer like most of us look at all the trouble you're going through just trying not to use it. Give it a go. Let me know if it works and please give me an approve my answer if it works. I forgot email to my original account and need access to parts of the site I cannot qualify for yet. Thanks. – tommydevs Mar 03 '15 at 23:51