asked on

Overriding CSS

Hello, I am trying to override some css on another sheet which is on a server. How would I override CSS with other CSS? Is there an "Important" term to use if I run into any problems with other CSS and I want to override the same thing? Please guide me through this. Thank you!

Solarfish

Add the things you want to override to another sheet and have that linked after the original sheet in your pages. This way your styles will override the equivalent ones in the original sheet. I'm not sure if this is exactly what you are asking som please come back if you want further information.

ASKER CERTIFIED SOLUTION

Cem Türk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hielo

There is no special keyword/syntax to override a css rule. You just provide a new rule "later on".
Ex: If on page1.css you have:
body{background-color:navy;color:white}

and on page2.css you have:
body{background-color:black;color:yellow}

then what will determine which css overrides the other is the order in which you "import" them into your page. The one imported last will be the honored rule. So if you have:

then the result is that body{background-color:black;color:yellow} will be the "honored/effective" style, since it was the last rule imported. Basically the first rule gets overwritten. Similarly if you were to reverse the order:

then body{background-color:navy;color:white} will be the "honored/effective" rule.

ad5qa

A great article about CSS Specificity

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

rajanibajpai

You can add like this
color: #fff !important;

VBBRett

ASKER

So how would I do it with the following?

div.Forums_RecentGroupActivityBy{float:left; text-align:center; padding:16px; height:90px; width:90px; overflow:visible;}

VBBRett

ASKER

I did the following and it still didn't work. I have one CSS that is from a vendor's server that points to this page and I have a localized CSS. Here is what I used.

div.Forums_RecentGroupActivityBy{float:left !important; text-align:center !important; padding:16px !important; height:90px !important; width:90px !important; overflow:visible !important;}

How can I fix it so that it works. The above is in the local CSS sheet that I am trying to get to work on my web page.

hielo

Sorry, things got cut off on my prev post. It should have read:
...
then what will determine which css overrides the other is the order in which you "import" them into your page. The one imported last will be the honored rule. So if you have:
<html>
<head>
<link href="page1.css" type="text/css" rel="stylesheet"/>
<link href="page2.css" type="text/css" rel="stylesheet"/>
</head>
 
then the result is that body{background-color:black;color:yellow} will be the "honored/effective" style, since it was the last rule imported. Basically the first rule gets overwritten. Similarly if you were to reverse the order:
<html>
<head>
<link href="page2.css" type="text/css" rel="stylesheet"/>
<link href="page1.css" type="text/css" rel="stylesheet"/>
</head>
then body{background-color:navy;color:white} will be the "honored/effective" rule.
...
 
>>So how would I do it with the following?
Just make sure you are including that rule AFTER the "original" rule.

Open in new window