SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having CSS Trouble

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 {

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jacobpressures View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    it will only override if it has higher specificity—
    the same or higher specificity.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  7. #7
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jacobpressures View Post
    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}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •