How can I override an inline style with an external css?

Question

I am trying to restyle a table generated by an asp.net gridview control. The problem I have is that the gridview is generating an inline styles. How do I make the browser render my css rather then the html style attribute?

Answer 1

I think you would need to override the style with JavaScript. jQuery would make this very easy.

Answer 2

You could try appending "!important" on to your css style definitions as per this article, or following the previous suggestion from Ryan Lanciaux

Answer 3

Are you using themes? Themes create inline styles. To get rid of them, you can turn off theming for the gridview:

<asp:GridView EnableTheming="false" ... />

Answer 4

You can try !important in your CSS file.

Answer 5

You can use !important; but that doesn't work in all browsers.

Here is an article on the usage of !important.

Answer 6

Unfortunately, inline CSS is always the last style applied to an element, so the inline styles will always override external styles.

If the Gridview's generated styles are giving you fits, have a look at the ASP.NET CSS Friendly Control Adapters (http://www.asp.net/CssAdapters/). It's a great project.

Answer 7

You may want to take a look at this: http://justgeeks.blogspot.com/2008/09/override-any-css-style-even-inline.html. Use the !Important modifier to make it happen

Answer 8

According to the CSS specification, element selectors have a specificity of 1, class selectors have a specificity of 10, ID selectors have a specificity of 100, and the specificity of inline styles is 1000. A higher specificity will override a lower specificity, so inline styles always win. However, there is a way out. The !important declaration overrides all the unimportant declarations. No matter what the source of the style is, it will lose to anything with the !important declaration.

Source: CSS Web Design by Eric A. Meyer.

Answer 9

Inline style has precedence over external styles. It cannot be overriden unless you use !Important.

Answer 10

hehe....hey guys what the hell are You talking about??? if You cannot do it that doesn't mean that it is not possible... thumbs up for inline style has precedence over external styles and for !important...

but here comes the trick: If you have an inline style like:

<div id="header" style="height:50px; width:700px; bakcground:#000;">ANYTHING HERE</div>

you can always rewrite with this CSS code: div[id="header"]{background:#CCC; width:650px; height:50px;}

This technique is mostly used on myspace layouts because you cannot access the code directly. So try it out....if You need any help you can mail me...

Greets, Attila

Answer 11

To override all styles and apply a specific style then always use !important. But make sure you are applying this only to a specific scenario. Otherwise it will apply everywhere. For example, if you want to apply to p tag on a single page then use some id or class to it and apply important only for it. Don't apply important to p because it applies to all p tags. Here is the example and explanation. http://praveenbattula.blogspot.com/2009/04/importance-of-important-property-in-css.html