CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3stylesheet
JRsz
JRsz

Reputation: 2941

Outsourcing css property does not work

I have a simple problem which I can not solve despite of all my research and trying. I want to move a css property out to a file. In the code snippet below the fist <li> Element ist not displayed properly where as the second is.

My CSS File:

.navBarItem
{
    padding-left: 0px;
}

My HTML File:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/design.css" />
</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-collapse collapse" id="navBar">
                <ul class="nav navbar-nav">
                    <li><a href="#" class="navBarItem">Action</a></li>
                    <li><a href="#" style="padding-left:0px;">Action</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

I thought that putting the given property in another file would make no difference, especially when I import that css file at the very last.

Upvotes: 1

Views: 427

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

In the first case (using the class) you play by the specificity of the actual selector you use. .navBarItem is a single class so it would be overriden by anything more specific.

in the second case however you use the style attribute (inline styling) which has the highest specificity (besides using !important)

So the problem is not that the rule is in an external file but that it is overriden by some other rule with higher specificity.

In your specific case the offending rule is .navbar-nav > li > a in the bootstrap.css file.

Setting up your rule as .navbar-nav .navBarItem{padding-left:0} would fix it.

Upvotes: 3

arch1ve
arch1ve

Reputation: 183

Your style rule is overruled by 'theme.less' and 'bootstrap.css'. The easiest fix to your problem is changing your css to:

.navBarItem {
  padding-left: 0px !important;
}

So that your new attribute is considered of the highest importance.

If you right click the first 'Action' link and Inspect Element (Chrome), you will see that the exact css attribute that overrides your own styling is this:

.nav > li > a //found in bootstrap.css at line 3972

Now, for your own rule to be of highest importance, you have to keep the inheritances from the first attributes and replace "a" with your own class, like so:

.nav > li > .navBarItem {
  padding-left: 0px;

}

Upvotes: 2

Webeng
Webeng

Reputation: 7143

I believe your problem has to do with the location of your file. You linked the file to css/design.css

<link rel="stylesheet" href="css/design.css" />

you would need the css directory to be in the same directory as your html file, for example:

  • public.html
    • index.html //your html page
    • css
      • design.css

if this isn't the problem, please comment me on how your files are structure so what this can be ruled out as the problem.

Upvotes: 1

Related Questions