universal CSS

@noslenwerdNov 01.2005

We have a basic css that loads into our header for all the companies we host that uses our title services. But for one company I need everything to show up differently. Now my question is, say the file is named styles.css… its going to be loaded in no matter what… now what if i put my css table information into the head of my html file? Which will override which?

for instance i want to put this in my style info in the head of my html…

TD, BODY, TABLE, TR
{font-size: 10pt; font-family: tahoma; color: #016AAC; }

thanks

to post a comment

CSS

15 Comments(s) _↴

@BonRougeNov 01.2005 — #It depends. If you put that after the link to your stylesheet and you have nothing more specific in your style sheet, then it will work. If you have id's in your stylesheet (as most people do) then any style set for the id should be counted as more specific than these new rules. So, if you have a table with an id and there are rules set for that id, then this new set of rules you have here won't overrule them as 'table' is less specific.

I hope this helps.

@noslenwerdauthorNov 01.2005 — #yes it does.. thank you

@tegraphixNov 01.2005 — #You could also use "!important".

[URL=http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules]http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules[/URL]

@ray326Nov 01.2005 — #You could also use "!important".[/QUOTE]Which IE will ignore.

@tegraphixNov 01.2005 — #Which IE will ignore.[/QUOTE]
Well, try this link.

[URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/important.asp]http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/important.asp[/URL]

And if you view this page using IE, there is a button that will show you an example.

@ray326Nov 01.2005 — #Error: unterminated character class

Source File: http://msdn.microsoft.com/workshop/code/browdata.js

Line: 26, Column: 31

Source Code:

else if (this.userAgent.match(/Mozilla[/].*(95[/]NT|95|NT|98|3.1).*Opera.*(d+).(d+)/))

Gee, that sure makes me feel like it works ok. I believe the !important hack is one of the mainstays of fixing IE CSS problems.

@tegraphixNov 02.2005 — #Let me help you out since you are having some browser issues. The !important rule is supported by IE 4.0+.

[upl-file uuid=3be5367e-4771-4933-8814-f3f751db64e9 size=59kB]impt.gif[/upl-file]

@ray326Nov 02.2005 — #http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/

Note item 4.

@tegraphixNov 02.2005 — #Open this in your IE, then uncomment the CSS and refresh and tell me if it works because it sure does in mine.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 
 <style type="text/css">
 /*
 p {color: red !important}
 p {background-color: white !important}
 */
 </style>
 
 </head>
 
 <body>
 <p style="color: white; background-color: black">
 Text text text text text text
 </p>
 </body>
 </html>[/code]

@ray326Nov 03.2005 — #

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <style type="text/css">
 p {color: red !important; color: black}
 </style>
 </head>
 <body>
 <p>If this is black then I must be IE</p>
 </body>
 </html>
 [/code]

@tegraphixNov 03.2005 — #Now try it with the CSS corrected. [URL=http://www.w3.org/TR/CSS21/cascade.html#important-rules]http://www.w3.org/TR/CSS21/cascade.html#important-rules[/URL]

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <style type="text/css">
 p {color: red ! important}
 p {color: black}
 </style>
 </head>
 <body>
 <p>With correct CSS, the text is red.</p>
 </body>
 </html>[/code]

@ray326Nov 03.2005 — #Sorry but that's like saying a(b+c) != ab + ac. There's nothing in that w3c reference that indicates either of our variations to be more correct than the other. It sounds like your definition of correct syntax is "the syntax that IE parses properly." Do you have a pointer to a w3c css spec section that says "p {color:red !important; color:black;}" is invalid selector syntax?

@tegraphixNov 03.2005 — #The whole idea of !important is to override a style that is set somewhere else. So placing it in the same declaration is absolutely useless. And the fact that both of my examples work in IE shows that it does support !important.

@ray326Nov 04.2005 — #I'll take that as a negatory but I appreciate the examples where IE does get !important right.

@tegraphixNov 04.2005 — #OK, all you have proved is your stubbornness. If you can't understand that it is used to let user stylesheets override author stylesheets which means they would not be in the same selector, then there is no point in further discussing this. If you can edit the previous style it would be asinine to place two of the same declaration in one selector. So please, by all means, continue to think IE doesn't support !important. Continuing this thread is beyond pointless.

Also in #CSS _↴

Background Image Preload Question Positioning Question?Annoying little white lines in CSS Menus?

Success!

Help @noslenwerd spread the word by sharing this article on Twitter...

Tweet This

universal CSS

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

universal CSS

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴