CODEWITHSUNDEEP
csshtml
Matt Hintzke
Matt Hintzke

Reputation: 7984

Bootstrap CSS is not getting overridden?

I am using Bootstrap CSS on my site and am loading in the <head> element. Just below I load the boostrap I have a <style> element where I am trying to override some CSS from the bootstrap, but it is not overriding it when I look at the Chrome Dev Inspector. I thought elements in element should cascade the previous ?

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Women's Transit</title>
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
        <link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
        <link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />

        <style type="text/css">
            /* Global elements */
            input {
               height:30px;
               padding:8px;
            }
         </style>
</head>

Upvotes: 1

Views: 128

Answers (2)

Stokely
Stokely

Reputation: 15809

The internal or embedded style you created would have a higher "order of importance" than Bootstrap's and cascade over their styles ONLY if the same selector was used in Bootstrap's sheet with the same weight and selectivity. That's not likely the case because they use classes to modify most styles. The "input" element has a weight of 1, so if they use classes with those properties they would easily cascade over your element style (a plain class generally has a weight of 10).

Bootstrap does use an "input" style in their reboot element style sheet, so your sheet would likely cascade over that one style. But I don't see them changing height or padding there so your styles would apply until their custom class changes its property styles further. In addition, their input style changes things you don't, like "margin" and "line-height" which might be affecting your layout further.

My advice is to NOT use "input" or "!important" and instead create a custom class and add the class to your element. Make it more selective than Bootstrap's with a full set of properties so you cascade over Bootstrap's input and class styles but inherit some things you like. This gives you full control now over what you like and don't like in Bootstrap:

body form .myinput{
    width:100px
    height: 30px;
    padding: 8px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

<input class="myinput ..." />

The downfall of most young web developers with CSS is they do not add enough style properties to their styles and rely on either inherited or unknown changes to be cascading down into their elements. Adding a full set of properties gives you total control over how that element looks and what it inherits.

The mystery is gone :)

Upvotes: 0

bjb568
bjb568

Reputation: 11498

You probably want !important.

input {
    height: 30px !important;
    padding: 8px !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

Important:

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.

So !important is the easiest way to override styles, because it is more "specific" than other styles. Please note that overriding styles is very bad practice, especially with !important.

The actual solution: Don't override styles.

Upvotes: 1

Related Questions