External CSS doesn't work, while inline styling does work

Question

If I write this in my external css file it does make 'a' text green.

.ink-navigation ul.menu.black li ul.submenu li a {
   color: green;
}

but this works

<nav class="ink-navigation"> 
   <ul class="menu black">
     <li>
       <ul class="submenu">
         <li>
           <a href="#" title="" style="color:green">This is a text</a>
        </li>
       </ul>
     </li>
   </ul>
</nav>

Does anybody knows why the external css does not work?

Answer 1

CSS executes in order; therefore rules at the bottom of your CSS are given higher priority and override any prior rules. Also, inline CSS executes after the stylesheet and since it is seen last, it takes priority.

A simple fix would be to add important to the colour... eg:

• color: green!important;

On a side note, I highly recommend that you reduce your code by removing unnecessary bloat which actually contributes to such problems as this. If .ink-navigation is unique you don't need to use your current format. Use .ink-navigation ul li ul li a {} or even .ink-navigation .submenu a {} . However, if you have existing rules with the larger format then that will override the shorter format, so its important to address all occurrences if you want to shorten your code.

Answer 2

In the head tag ,first Place bootstrap file on the top, then css file below. with this you don't want to use !important in every style code.

Answer 3

Where have you attached your css external files?

You should have something like this in your header

     <link rel="stylesheet" type="text/css" href="CSS/cssFile.css">

Answer 4

Most likely your external CSS is not linked to correctly in your HTML.

Example of how to link a CSS file that's in the same folder as your HTML:

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

Also, just a tip - it's usually clearer code to understand and debug if you just put an id or class (ie id="green-title" ) as an attribute for your tag.

#green-title {
color: green;
}