Forum

[Dvmav]aa]

Hi all,

I had a couple of simple lines in my style.css that were being ignored, for example...

#footer {
background: red;
}

Then just experimenting I moved this line up the page in style.css and suddenly it began to work. So it seems that higher up the page on style.css = greater priority. I guess that previously the red colour was being overriden by the colour of another div higher up the page in style.css.

Have I got this right? If so I didn't realise that the position of a div in the style.css page could make any difference. If I am right does anyone please have a link about this?

thanks

 

[gradyp]

Hmm.... That's an interesting question. I checked over at W3 Schools, and couldn't find an answer for "same level" as to which would take precedence (at least not on a quick glance through their tutorials) and I couldn't find a quick answer in my books on the matter.

What I can gather, is usually, you generally don't have two at the same "level" of specificity, so there's usually not a conflict. As to which one shows up, my guess is that it might be up to the browser, so in one browser, it might work at the end and in another browser, it wouldn't.

That said, using inheritance (any tag that would be within another tag... ie a P tag within a DIV tag with a given attribute) and specificity (writing the tags in an order such that it looks for a given tag with in another tag, such as a EM tag within a P tag that's in a particular DIV tag, etc.) you can change just about anything you want.

Generally, the cascading goes like this:

1. Browser defined style
2. External style sheet
3. Internal style sheet
4. Inline style sheet.

In other words, anything put in at level "3" would "override" anything put in at level 2.

It's possible that the tag you were trying to "insert" at the end had been previously defined with the given attribute and so it is possible the browser just ignored the latter definition in the external sheet, and when you moved it up, you moved it past that code.

Then again, there could also have been a typo like a bracket not closed off correctly or a ; missing and moving the line before that point made it "valid", and so it worked.