Thread: Css

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Posts
    2
    Rep Power
    0

    Css


    I have an external stylesheet that give the following properties to the H3 tag

    H3 { font-family:Lucida;
    font-style:normal; color:blue }

    Later, the publisher adds a font color tag set to RED inside of the H3 tag within their HTML code. Because of the proximity to the affected content the publisher set H3 color of RED will automatically overwrite what is in the external stylesheet. Will this always be the case? Is there anything that I can do to keep this from happening? Is this a case of browser version?
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    It's not really designed that way. Imagine somebody looking at the code who doesn't know anything about the process that created it. They will assume you're wanting to override the CSS for this special circumstance. So, obviously, the CSS rendering engine looks at it in this way.

    I know that you can use the ! important notation to override other style sheets applying to a document, but I don't think it extends to hard coded HTML.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    In the CSS weighting scheme (the Cascade) inline HTML pretty much rules the roost, as its proximity to the element is taken to indicate - well - a strong desire to style the element that way. CSS doesn't know from pushy publishers. No weighting tricks I'm aware of will override this; you could simply client-side script over the publisher's preferences:

    function destroyAllFontTags() {
    if (document.getElementsByTagName) {
    var fontTags = document.getElementsByTagName('font');
    for (var i=0; i<fontTags.length; ++i) {
    fontTags[i].setAttribute('color','');
    fontTags[i].setAttribute('face','');
    fontTags[i].setAttribute('size','');
    }
    }
    }

    window.onload = destroyAllFontTags;
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    sydney, australia
    Posts
    68
    Rep Power
    14
    to my knowledge there is no way of overriding a font tag in this context

    the best suggestion is to strip the font tags as suggested before

    for reference though:

    to give maximum weight to a style from an external stylesheet use:

    <h3 id="myheading">text</h3>

    #myheading { font-family:Lucida !important;
    font-style:normal !important;
    color:blue !important;}

    id's have a greater weight than classes which in turn have more importance than selectors (in this case the selector is H3)

    !important adds extra weight to your style again

IMN logo majestic logo threadwatch logo seochat tools logo