SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Sep 13, 2004, 11:34 #1
- 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?
-
Sep 13, 2004, 16:48 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
background="bkg2.gif
You have an html attribute.
An inline style would be.
Code:<table width="600" cellpadding="30" style="background:url(bkg2.gif} repeat left top"................ >
Paul
-
Sep 13, 2004, 17:09 #3
-
Sep 13, 2004, 17:43 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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>
Paul
-
Sep 14, 2004, 12:38 #5
- 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.
-
Sep 14, 2004, 13:14 #6
- Join Date
- Jul 2003
- Location
- Springfield, MO
- Posts
- 1,867
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Pokpok
Originally Posted by Pokpok
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.
-
Sep 14, 2004, 13:40 #7
- 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
-
Sep 14, 2004, 16:41 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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
-
Sep 14, 2004, 17:52 #9
- Join Date
- Sep 2004
- Location
- Thailand
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by rbutler
Originally Posted by rbutler
Originally Posted by rbutler
Thanks for everyones reply.
Bookmarks