CSS Priority Problem - I can't override an external rule with an embedded rule

First of all, to let you see my code, I've uploaded two example files: testpri.html and style.css. In my external CSS file, I applied a black background style to the li's in #test. Then I added another style in the HTML file, turning the background color of the #hello list item into red. The result isn't what I expected. The #test list item became black, instead of the red style I applied to it in the HTML file. Don't embedded styles have a higher priority than external styles? And don't specific styles have higher priority too? #hello is more specific than #test li, right? Then what am I doing wrong?

Comment/Reply (w/o sign-up)

Actually, I think the "#named_id element" has more specificity and will override the "#named_id". If the "li" was missing, then the embedded css would over-ride the stylesheet, but with the "li" the cascade gives it more points, so it is the one that is set. Try adding the "li" to the embedded style and then it should over-ride the external css.

Comment/Reply (w/o sign-up)

How can I add li to the embedded style? #hello li does not do anything, because I'm trying to apply it to #hello. I'm only trying to change the style of the #head list item, and not anything else in the #test unordered list.

I've updated the listpri.html file. Now it includes more than one li's. I hope that makes it more clear.

Comment/Reply (w/o sign-up)

reference here: http://www.w3.org/TR/REC-CSS2/cascade.html#q1

try #test ul { background-color: #ffoooo;}

That should colour the ul red and the other selector should colour the li's black. Might be a problem showing the red because there is only the black li as content, so add some margin and/or padding to the ul to see if the red breaks through.

Comment/Reply (w/o sign-up)

No, I'm not trying to turn the ul black. What I'm trying to do is to make every li black using the external style sheet, then turn only one li red using the embedded style. That way, I can have multiple pages that use the same external style sheet, but each have a different embedded style to make that page look different than other pages.

Is that confusing?

Comment/Reply (w/o sign-up)

Here you go, I don't think I need to explain it, but if you want an explanation I can give one:

bgtest.html


bgtest.css


External styling has higher priority, because it's last to be loaded. Your document is loaded first, all elements, embedded and inline styling are done at this point, then the external styling is loaded.

In order of importance:

External
Inline
Embedded

Use !important to make it higher priority.


Cheers,


MC

 

 

 

Comment/Reply (w/o sign-up)

Thanks, mastercomputers! I knew you would come to save me.
But I always thought external styles had the lowest priority. That's what I read in every CSS book and website. Weird.

EDIT: By the way, what does the ul in ul#unordered li do? Is it just good practice? Or does it prevent bugs in different browsers?

Comment/Reply (w/o sign-up)

External stylesheets do have the lowest priority and what you've read about CSS is correct, the problem is Firefox doesn't do cascade order correctly (which I was meant to refer to in the above) and I'm just so use to working with Firefox, that sometimes not relying on the browser to do what you want is better than relying on it. I never rely on browser default styling, every element I use within a document, I style how I want it to appear.

The reason why I do ul#unordered li is because it's more specific, anything that is more specific will have higher importances.

each element used is 1 point, each class is 10 points and each id is 100 points:

li = 1pt
ul li = 2pt
#unordered li = 101pt
ul#unordered li = 102pt
ul#unordered li#itemone = 202pt

So lets say I had

ul#unordered li { background-color: green; }
#unordered li { background-color: pink; }
ul#unordered li { background-color: blue; }

What background colour am I going to expect should show?

When an item has the same specifications, the last one that appeared would override the ones above it. We should expect background to be blue, if we took that out, we would expect green to show, even though the latter of styling for the same element does appear, the one using green is higher in importance because it's more specific.

Another reason is because it lets me know what type of element I'm working on and what that element is capable of doing, since not all elements accept every CSS styling.


Cheers,


MC

Comment/Reply (w/o sign-up)