CSS Priority Problem I cant override an external rule with an embedded rule

szupie · April 15, 2006

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?

iGuest · April 15, 2006

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.

szupie · April 15, 2006

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.

iGuest · April 15, 2006

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

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.

Edited April 15, 2006 by jlhaslip (see edit history)

szupie · April 15, 2006

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? :lol:

iGuest · April 16, 2006

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

bgtest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en">  <head>	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />	<title>Testing CSS</title>	<link rel="stylesheet" type="text/css" href="bgtest.css" title="bgtest" />	<style type="text/css">	/*<![CDATA[*/	  li#listone { background-color: red !important; color: black !important; }	/*]]>*/	</style>  </head>  <body>	<ul id="unordered">	  <li id="listone">First</li>	  <li id="listtwo">Second</li>	  <li>Third</li>	</ul>  </body></html>

bgtest.css

ul#unordered li { background-color: black; color: white; }

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

szupie · April 16, 2006

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?

Edited April 16, 2006 by szupie (see edit history)

iGuest · April 17, 2006

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 = 1ptul li = 2pt#unordered li = 101ptul#unordered li = 102ptul#unordered li#itemone = 202ptSo 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

Sign In

CSS Priority Problem I cant override an external rule with an embedded rule

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information