why does CSS head style not work for Bootstrap HTML file

Question

Im working with this bootstrap html file as the following:

<head>

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</head>

<body>

    <div class="w3-sidebar w3-bar-block" style="width:35%">
        <h2 style="margin-left:15px;">Some Favorites</h2>
        <a href="#" class="w3-bar-item w3-button" style="color:blue;">Celery Root</a>
        <a href="#" class="w3-bar-item w3-button" style="color:blue;">Spaghetti Squash</a>
        <a href="#" class="w3-bar-item w3-button" style="color:blue;">Killer Mushroom</a>
        <input type="text" class="form-control" style="margin-left: 15px;">
        <button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

As you can see, i added an inline style to anchor so that the font is blue.

However, when i write the CSS style into the at the head section, the desired CSS effect does not get achieved. It was totally perfect to get the desired CSS effect by writing an inline style. Can anyone explain?

score 1 · Answer 1 · answered Nov 07 '17 at 08:00

This is happening because bootstrap overwrite some html tags with his own css, so will not work:

<head>

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <style>
        a {
            color: blue;
        }
    </style>

</head>

<body>

    <div class="w3-sidebar w3-bar-block" style="width:35%">
        <h2 style="margin-left:15px;">Some Favorites</h2>
        <a href="#" class="w3-bar-item w3-button myAnchor">Celery Root</a>
        <a href="#" class="w3-bar-item w3-button myAnchor">Spaghetti Squash</a>
        <a href="#" class="w3-bar-item w3-button myAnchor">Killer Mushroom</a>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

So to fix this, you have 3 ways to make this.

1) Put the style inside html tag like you had in your example.

2) Use !important rule to overwrite the tag and apply css always, is not recommended abuse of this method and use it always.

3) Add class or id and work with them, so the css will works fine. This is the most reccomended way to do it.

Here you got a working example for each point:

<head>

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <style>
        /* first-of-type to select only the first <a> tag and make this example*/
        a:first-of-type{ 
            color: green !important; 
        }
        
        /* this class is inside the 3º <a> tag*/
        .myAnchor {
            color: blue;
        }
    </style>

</head>

<body>

    <div class="w3-sidebar w3-bar-block" style="width:35%">
        <h2 style="margin-left:15px;">Some Favorites</h2>
        <a href="#" class="w3-bar-item w3-button">Celery Root</a>
        <a style="color:red;"href="#" class="w3-bar-item w3-button">Spaghetti Squash</a>
        <a href="#" class="w3-bar-item w3-button myAnchor">Killer Mushroom</a>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

But when you used the class selector in the header section to specify the CSS style, why was it not overwritten by Bootstrap? What CSS styles/properties are overwritten by Bootstrap external link? — Ke Yang Zippie, Nov 07 '17 at 08:32
Tags are written by bootstrap, so if you want change them overwrite them with !important rule or overwrite them using your own classes/id. A lot of tags are overwritten by bootstrap, this post may can help you: https://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css — SilverSurfer, Nov 07 '17 at 08:42

score 0 · Answer 2 · answered Nov 07 '17 at 03:57

:) Use this code.

Make sure the is in the head section. It's working for me.

<!DOCTYPE html>  
<html lang="en">  

<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <style>
  .w3-button {
    color: blue;
  }
  </style>
</head>  

<body>  

<div class="w3-sidebar w3-bar-block" style="width:35%"> 
<h2 style="margin-left:15px;">Some Favorites</h2>
  <a href="#" class="w3-bar-item w3-button">Celery Root</a>
  <a href="#" class="w3-bar-item w3-button">Spaghetti Squash</a>
  <a href="#" class="w3-bar-item w3-button">Killer Mushroom</a>
   <input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  
</html>

Because bootstrap styles ``. If you style the class instead of `` then it overwrites whatever contradiction occurs. — oatmealNUGGY, Nov 10 '17 at 02:47

score 0 · Answer 3 · answered Nov 07 '17 at 04:02

apply your style to a tag directly because in bootstrap style effects to a tag directly like this a {color: #337ab7;}

a.w3-button{
        color: blue;
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <body>  

    <div class="w3-sidebar w3-bar-block" style="width:35%"> 
    <h2 style="margin-left:15px;">Some Favorites</h2>
      <a href="#" class="w3-bar-item w3-button">Celery Root</a>
      <a href="#" class="w3-bar-item w3-button">Spaghetti Squash</a>
      <a href="#" class="w3-bar-item w3-button">Killer Mushroom</a>
       <input type="text" class="form-control" style="margin-left: 15px;">
    <button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
    </div>



    </body>

score 0 · Answer 4 · answered Nov 07 '17 at 10:40

As others mentioned it before, Bootstrap is adding its own styles to html elements like colors, font-sizes, margins, etc. I suggest, If you want your own colors, you can customize them in the bootstrap site, or you can write your own styles in a separate css file or in <style></style> tags.

But it has to be after you inserted the bootstrap.css file.

This is the style for the <a> tag from bootstrap:

a {
    color: #337ab7;
    text-decoration: none;
}

You can simple overwrite it in you css file (or in your style tag) like:

a {
    color: #0000ff;
}

Or you can add your custom css class for an anchor tag like:

.my-anchor {
    color: #0000ff;
}

then add it to your anchors in your html files

<a class="my-anchor" href="#"> my link </a>

If you want to deep dive, why is this happened, here is a good document. In short, think about it, that each selector types has their own counter. The higher the counter, the stronger will be your style, (and harder to overwrite it).

Like in your example. Each styles has their own numbers which is 3 digits.

000

if you are styling just the html tag like this:

a {
    color: #00ff00;
}

the counter will be: 001

But if you are adding a class selector :

.my-anchor {
    color: #0000ff;
}

it will be: 010 which is stronger and your anchor color will be : #0000ff If you add another class to your anchor tag, then the number will be: 020 and so on. If you add an id then the number will be 100 which is stronger than the 020. Just like in the shared document for inline styles

Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

I'm not recommending to use !important beacouse after that, you will be confused, how to overwrite it. If it is a last resolt, then you can use it, but if you need to overwrite it, then the !important styles order will decide which one will be used.

Hope I didn't confused you and helped a little.

thank you. it is very helpful. i will read the link which you sent me that discusses the counter of each css styling method. — Ke Yang Zippie, Nov 08 '17 at 00:50
just asking again, what is the specificity of the external link for the bootstrap file? — Ke Yang Zippie, Nov 08 '17 at 08:41

why does CSS head style not work for Bootstrap HTML file

4 Answers4