SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Thailand
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do inline styles always trump external stylesheets?

    Contrary to what i was taught, evidently not. I always thought that you could overule any property used in an external stylesheet by simply using an inline style or regular html property inside a tag. But lately i have been noticing that sometimes it does and sometimes not. Here is a specific example. In an external stylesheet i have set a background image for the body and table cells like this;

    body, tr, td { color: #000000; background: url(bkg.gif) .........

    In the html page, if i try to use a different background image with standard html in a table like this;

    <table width="600" cellpadding="30" background="bkg2.gif"........>

    it doesnt work. Why? The background image set for td in the external stylesheet is overuling whatever i use inline in either a table tag or the td tags themselves, the image doesnt show up even in the table cellpadding. Why? This is becoming a real pain because i cant figure out what overules what. I have this type of problem regularly with the a tag when using different link colors. When setting the a tag pseudo classes in an external sheet i cant ever get an inline style (in the a tag or any other tag) to overule it. I end up having to make a class or some other way. Isnt an inline property, whether css or html, ALWAYS supposed to trump whatever is in the external sheet?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    background="bkg2.gif
    An inline style would indeed overule your external background style. Unfortunately you don't have an inline style in your code.

    You have an html attribute.

    An inline style would be.

    Code:
    <table width="600" cellpadding="30" style="background:url(bkg2.gif} repeat left top"................ >
    I hope this answers your question

    Paul

  3. #3
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't you have to also override the same element?

    I mean table shouldn't override styles set for td elements but using inline styles on your td elements in the code should override those set in an external style sheet.
    Wayne Luke
    ------------


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Css style do seem to overide the equivalent html elements.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    font {color:blue}
    </style>
    </head>
    <body>
    <p><font color="#FF0000" >This is actually blue and not red as per the font definition</font></p>
    </body>
    </html>
    The font color is overriden by the css font definition.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Thailand
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, what i have found is that the style property in the td tag does work but that an html tag doesnt, as paul said. I guess i can understand why neither would work in the table tag, but i did always think that an html tag would always trump a css tag. Seems like i have read that many times but evidently not true. I have developed a habit of using html tags for simple inline stuff because, well, they have the most weight (or so i thought) and you dont have to worry about compatibility problems either.
    But now i am wondering if only certain style properties have more weight than html or if its just for external sheet properties or exactly what the rules (or rules of thumb) are for this.

  6. #6
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pokpok
    I have developed a habit of using html tags for simple inline stuff because, well, they have the most weight (or so i thought) and you dont have to worry about compatibility problems either.
    You going to have to worry about compatibility problems with using the <font> tag in future versions of XHTML and CSS, because browsers in the future will get rid of support for the <font> tag.

    Quote Originally Posted by Pokpok
    But now i am wondering if only certain style properties have more weight than html or if its just for external sheet properties or exactly what the rules (or rules of thumb) are for this.
    Any CSS style will over ride an HTML property. In CSS, this is the order:

    Inline overrides embedded
    Embedded overrides external

    It's best to use external, because if you inline and you have 30 + pages that use an inline style to change the font color, then you have to go into each page and change it, whereas with an external stylesheet, change it one place, link this stylesheet to the rest and you're done. Plus, to semanitcally (I really dislike this word) correct, it's invalid XHTML to put inline styles in your HTML page.

    General rule of thumb, stick to external stylesheets.
    Ryan Butler

    Midwest Web Design

  7. #7
    SitePoint Enthusiast RogueNW's Avatar
    Join Date
    Sep 2004
    Location
    An island near Seattle
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couple of things I've learned the hard way being such a n00b.

    Use external stylesheets as much as possible.

    If you're using CSS but can't get it to work 100% the way you'd like, don't fall back to html "just to get it done". Forge ahead with the CSS. Your clients, visitors and ego are better off in the log run.

    Love this place. Learn, Learn, Learn.
    default signature

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have a look at section 6.4.4. to see how css overides html presentational properties.

    http://www.w3.org/TR/REC-CSS2/cascade.html

  9. #9
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Thailand
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rbutler
    You going to have to worry about compatibility problems with using the <font> tag in future versions of XHTML and CSS, because browsers in the future will get rid of support for the <font> tag.
    Have heard many people say this but not sure i buy it. There are hundreds of thousands, no, millions of pages on the net done with font tags that will never be changed, i cant believe future browsers will not recognize them anytime soon. It may not be "proper", but most of the stuff thats depreciated now will still work for a long long time to come. I have been trying to use them a lot less, but not for that reason.
    Quote Originally Posted by rbutler
    Any CSS style will over ride an HTML property
    Is that true? Evidently so, i guess i had it exactly backwards. Story of my life, hehe.
    Quote Originally Posted by rbutler
    General rule of thumb, stick to external stylesheets.
    Am trying to do that now, but you know its just so easy to stick something inline when its a one-off, i mean when its only for something simple and just a single instance of it. But if html actually doesnt overule thats definitely going to help change old habits a lot quicker.
    Thanks for everyones reply.


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
  •