0

I just recently installed bootstrap 3.0 onto my site and have been playing around with. I've got a couple questions regarding it;

I want to change certain specifications for the jumbotron (and other classes) in my own .css file. I have a file called "mycss.css" and have added the following code into it

.jumbotron {
    background-image: url();
    padding: 30px;
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: 200;
    line-height: 2.1428571435;
    color: inherit;
    background-color: #eeeeee;
}

In my index.htm I have declared my .css as follows (after the bootstrap.min.css declaration);

<link href="css/my.css" rel="stylesheet" media="screen">

However, these changes are not being reflected on my site. Is there anything else I need to change?

austin
  • 5,816
  • 2
  • 32
  • 40
user2899296
  • 21
  • 2
  • Open developer tools in chrome and refresh. Then, go to "network" and look if your CSS file is being fetched at all – yuvi Oct 20 '13 at 06:45
  • 1
    what are you trying to change exactly? you have all the same values like the default `.jumbotron` class, you only added an empty background-image... there's really no need to add everything in your custom CSS just the properties you want to add or modify – omma2289 Oct 20 '13 at 06:58
  • I like to put big thick borders around things when I get confused. @koala_dev has a good point. Not much to test with here. – sheriffderek Oct 20 '13 at 17:35

2 Answers2

0
"I have a file called 'mycss.css' "


<link href="css/my.css" rel="stylesheet" media="screen">

These don't match. That could be the problem.

My answer is probably the real problem, BUT -

@SeWonJang's point it still valid whether it is an ID or a class - and could very well be the issue. If I make: .main-content ul {list-style: none} and then somewhere in .main-content give a class of my-list to a ul - I can't just say .my-list {list-style: disc} --- because I've already been too specific(or overarching) - I've already said: "Apply these rules to ANY ul inside of .main-content." This wins over .my-list {list-style: disc}. Now I have to say .main-content .my-list {list-style:disc} I have really only found this to be a real issue with type. Since almost everything ever is a list of crap - but then in the article text I want some list-style --- That is the best example for me.

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • Try with something more obvious, body { like background-color: red; } or something. Use an inspector to see what is going on too. – sheriffderek Oct 20 '13 at 04:28
0

It's called CSS Specificity.

http://stackoverflow.com/questions/12780511/how-does-a-css-rule-override-another-css-rule

"Because of CSS Specificity. A selector's weighting is evaluated based on the components that make it up, with id's given a weighting of 100, classes with a weighting of 10, and element selectors with weighting of 1."

It means, the more specific your target element is, the higher weight it gets.

so if you want to specify some properties for .jumbotron class,

in order to override it, you need to make the selector more specific,

for example,

#your_id .jumbotron

This way, when your browser interpretes your CSS styles,

if chooses your style rather than Bootstrap's default style.

Se Won Jang
  • 773
  • 1
  • 5
  • 12
  • That could be it, but that means that it is probably called with too much specificity to begin with. – nouveau Oct 20 '13 at 04:30
  • No, the questioner only put .jumbotron as the selector. This means it has a weighting of 10 only. Sometimes in order to override bootstrap elements, you have to wrap them in a couple of ids or classes to make it more specific. – Se Won Jang Oct 20 '13 at 04:34
  • Sounds like a great reason to skip bootstrap. – nouveau Oct 20 '13 at 04:35
  • 1
    As far as I know bootstrap hardly (if ever) uses anything other than classes in its CSS (specifically for that reason). In any case, his CSS file should overwrite it, specifics or not – yuvi Oct 20 '13 at 06:48
  • 1
    Yes, there's no need to add specificity to the selectors to override Bootstrap, just make sure to include the custom CSS file after Bootstrap and use the same selectors they use. In this case the code in the OP should work fine – omma2289 Oct 20 '13 at 06:54