OneMoreQuestion OneMoreQuestion - 4 months ago 7
HTML Question

Custom css overridden by Bootstrap in browser

I have my stylesheet directory set up like this

stylesheets
bootstrap.min.css
style.css


In my style.css, I want to edit the pre tag like this:

pre {
background-color: #d9edf7;
border: #d9edf7;
color: navy;
}


However, this is not getting picked up in the browser. It seems like the browser is going with the styles in bootstrap.min.css. This is what it looks like in Chrome's inspector tools when I hover over the block of pre tag:

enter image description here

So how do I get it to use my custom css instead?

Answer

You have to make sure you include your custom CSS after the Bootstrap CSS, like the following:

<head>
    <!-- don't include your custom CSS here! -->
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <style>
        pre {
            background-color: #d9edf7;
            border: #d9edf7;
            color: navy;
        }
    </style>
</head>
Comments