Do inline styles always trump external stylesheets?

**Pokpok** · Sep 13, 2004, 11:34

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?

**Paul O'B** · Sep 13, 2004, 16:48

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

**Hierophant** · Sep 13, 2004, 17:09

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.

**Paul O'B** · Sep 13, 2004, 17:43

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

**Pokpok** · Sep 14, 2004, 12:38

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.

**rbutler** · Sep 14, 2004, 13:14

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.

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.

**RogueNW** · Sep 14, 2004, 13:40

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.

**Paul O'B** · Sep 14, 2004, 16:41

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

**Pokpok** · Sep 14, 2004, 17:52

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.

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.

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.

The SitePoint Forums have moved.

User Tag List

Thread: Do inline styles always trump external stylesheets?

Thread Tools

Display

Do inline styles always trump external stylesheets?

Bookmarks

Bookmarks

Posting Permissions