Having CSS Trouble

**jacobpressures** · Dec 14, 2012 21:24

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!

**ronpat** · Dec 14, 2012 21:35

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

change this:

Code:

div#center h1 #homepage {

to this:

Code:

div#center h1#homepage {

**ralph.m** · Dec 14, 2012 22:02

Originally Posted by jacobpressures

I understand that anything embedded should override external settings.

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

**ronpat** · Dec 14, 2012 22:09

Originally Posted by ralph.m

it will only override if it has higher specificity—

the same or higher specificity.

**ralph.m** · Dec 14, 2012 22:19

Originally Posted by ronpat

the same or higher specificity.

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.

**ronpat** · Dec 14, 2012 22:27

Originally Posted by ralph.m

Well, in saying the same you are assuming that the styles embedded in the <head> come after the link to the style sheet.

Good point! assumptions... my nemesis

**jacobpressures** · Dec 14, 2012 22:29

Originally Posted by ralph.m

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.

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!

**ralph.m** · Dec 14, 2012 22:43

Originally Posted by jacobpressures

How can i read up on the rules for this?

Here's a good reference:

http://reference.sitepoint.com/css/specificity

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}

**ronpat** · Dec 14, 2012 22:55

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.

User Tag List

Thread: Having CSS Trouble

Thread Tools

Display

Having CSS Trouble

Bookmarks

Bookmarks

Posting Permissions