Overriding External CSS

Question

I have an external CSS file which is being imported into one of my pages. This external CSS assigns styles to HTML tags. For example,

table {
    width: 100%;
    font-size: 3em;
    // long list of CSS styles
}

tr {
    width: 100%;
    font-size: 3em;
    // long list of CSS styles
}

What is the best way to override these external CSS styles for a single table? For example, if I have a table and I don't want these external style on my table, how would I do that?

Thanks.

Edit - As a clarification, the "long list of CSS styles" has hundreds of styles. Most of the answers so far suggest that I override the provided CSS. Do I need to override all of the hundreds of styles?

score 2 · Accepted Answer · answered Aug 30 '12 at 20:28

2

Load your own CSS after the other CSS you want to override. The last read rules (if the same level of specificity) will win out. You only need to override the specific rules you need/want to -- not all of them.

answered Aug 30 '12 at 20:28

j08691

204,283
31
260
272

The external CSS file has hundreds of styles for each HTML tag. Do I need to write override statements for each of them? Of is there some "clearInheritedStyles: true" or something similar that I can apply? – David Aug 30 '12 at 20:32

score 0 · Answer 2 · answered Aug 30 '12 at 20:29

you could use inline styles on your table,

<table style='width:90%'>
<tr style='font-size: 4.4em'>

or set up separate classes for the table in the external file, or create another .css file containing these styles

.otherTable{
    width: 90%;
    font-size: 2.3em;
    // long list of CSS styles
}

and in your html,

<table class='otherTable'>

score 0 · Answer 3 · answered Aug 30 '12 at 20:30

0

You should rewrite them to your needs right after the external css file. Load them in this order:

http://www.externalserver.com/styles.css
css/general.css

And then apply your styles which will suit your website theme.

answered Aug 30 '12 at 20:30

aspirinemaga

3,753
10
52
95

score 0 · Answer 4 · answered Aug 30 '12 at 20:34

0

In addition to what j08691 stated, if you have issues with your CSS taking effect, add the phrase "!important" before the semicolon to ensure it overrides the other settings.

http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

answered Aug 30 '12 at 20:34

Lewie7558

3
3

score 0 · Answer 5 · edited May 23 '17 at 12:04

0

Be lazy and just scribble some javascript on that particular page.

Here is the SO Q/A on that:

https://stackoverflow.com/a/196038/1617149

Or you can do it in jQuery/Prototype before the page is rendered, e.g. on DOM load.

edited May 23 '17 at 12:04

Community

1
1

answered Aug 30 '12 at 21:12

Theodores

1,209
1
11
15

Overriding External CSS

5 Answers5

Linked