This is just a quick reminder about a very common troubleshooting issue that you should always check if your site is not displaying as it should.
ID always has cascade authority over CLASS.
This works no matter how you do it. It doesn’t matter what order it is in. I could have this:
CSS:
#blue { color: blue;}
.red { color: red; }
Note: Assume that these are actually style rules that have tons of applied settings involved in them and are not just red and blue labled. I’m only using those lables to simplify.
HTML:
<p id=”blue” class=”red”>Text with id first.</p>
<p class=”red” id=”blue”>Text with id second.</p>
Both lines of paragraph text will display as blue because the id always has cascade authority.
Very often, and particularly common once your CSS gets a bit long and complicated, you may find certain things not displaying as they should. Always check to make sure you aren’t overriding your class settings with an id. Of course, inline styles overrule them, but I’d suggest you fix it in the code instead.
Also, remember that not only is it incorrect to use double id declarations, but that it doesn’t work well to solve this problem. For instance, if the text is supposed to be green, don’t do this:
<p id=”green” id=”blue”>Text with double id</p>
It will show the first id and ignore the second one.
If you must do a quick fix while you hunt for the root of the problem in your CSS, use an overriding inline style instead. Like so:
<p id=”blue” style=”color: green”>>Green text.</p>
Again, I highly discourage the use of inline styles unless absolutely necessary or a very temporary fix, so use them minimally and try to fix it another way.
~Nicole
nice site