Having CSS Trouble

HTML & CSS
1

Its been a while since I’ve used CSS. But i’m having trouble. For some reason, I can’t get my page to recognize some embedded code I have in the <style> tags. I understand that anything embedded should override external settings.

The global of the external stylesheet are overriding the embedded.

http://www.giodesigns.net/giodesigns/shomepage.htm

Global.css

#center h1 {

width: 380px;
min-height: 20px;
margin: .2em auto .5em auto;
font: bold 5em/1em Georgia;
text-align: center;
color: #ddd;

}

Embedded within the page shomepage.htm

I’ve tried several combinations.

div#center h1 #homepage {

width: 50%;
min-height: 20px;
margin: 2em auto 5em auto;
font: bold 2em/1em Georgia;
text-align: center;
color: blue;

}

<h1 id=“homepage”>Gioelli Jewelry</h1>

if you need more info, please let me know. Thanks!

2

In your example, you show a space between h1 and #homepage. Try deleting that space and see if it helps.

change this:


div#center h1 #homepage {

to this:


div#center h1#homepage {
3

No, it will only override if it has higher specificity—unless an inline style. Anyhow, ronpat has pointed out the problem in this instance.

4

the same or higher specificity. :slight_smile:

5

Well, in saying the same you are assuming that the styles embedded in the <head> come after the link to the style sheet. If the external style sheet link comes after the embedded styles, and the specificity is the same, the external styles will prevail. Styles in the <head> are treated like external styles—at least in that the last one wins, assuming the same specificity.

6

Good point! assumptions… my nemesis :slight_smile:

7

Thanks Ralph and you guys. I did not know this. By specificity do you mean ID and Class names? What about nesting? How can i read up on the rules for this?

Thanks very much!

8

Here’s a good reference:

It can seem like a tricky topic, but it’s pretty straightforward, really. As a simple example, a rule like this:

p {color:red}

is overridden by a rule like this:

p.special {color: blue}

because the extra class gives the rule more weight. But an ID carries more weight than a class, so this would prevail over the two above:

p#special {color: green}

9

And as Ralph pointed out awhile ago, if two items have the same specificity, the one that occurs last in the cascade trumps.

Given two equally specific items:

p {color:red}

p {color:blue}

The p will be colored blue.