I am trying to overwrite a style which is defined in a stylesheet that I can't change. How to do that?
For example, I have something like this in the stylesheet:
.SomeStyle
{
padding:4px;
}
How can I overwrite this in my ASP.NET page?
Add a comment
|
3 Answers
You could try making an identical style more "important" than the one from the stylesheet:
.SomeStyle {
padding: 11px !important;
}
The !important declaration will give priority to your style over the one defined in your stylesheet. Keep in mind older browsers ignore it altogether (like IE6), so this may not be a perfect solution for you.
You could also take a JavaScript/jQuery approach by manipulating which CSS class is assigned to the element.
A little reading material:
Comments
Inline css will always take precedent over inherited css.
<div style="width:500px">
3 Comments
Cᴏʀʏ
True, but it's considered bad practice to in-line your CSS.
Travis J
Only way around a style which is in the page (i.e. <style>.someStyle {padding:4px;}</style><div class="someStyle" style="padding:11px;">?</div> Not my fault the OP wanted to know how to override styles...Technically it is bad practice to not have access to your CSS so I find your comment non-constructive.
Cᴏʀʏ
There are other ways to override styles, even if they are defined in the page itself, that I would discuss before suggesting a bad practice workaround.
you can call you stylesheet after your CSS which contains this style
CSS overwrite the CSS which has last loaded.
make new CSS file and call it after your actual CSS file.
You can do it also like this
<div class="Calendar" style="height:10px;width:10px;"></div>
OR
<link rel="stylesheet" href="default.css" type="text/css" />
<link rel="stylesheet" href="OverWritedefault.css" type="text/css" />
Comments
