CODEWITHSUNDEEP
css
David
David

Reputation: 1107

Overriding External CSS

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?

Upvotes: 0

Views: 2926

Answers (5)

Theodores
Theodores

Reputation: 1209

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.

Upvotes: 0

Lewie7558
Lewie7558

Reputation: 3

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

Upvotes: 0

aspirinemaga
aspirinemaga

Reputation: 3937

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.

Upvotes: 0

Mike
Mike

Reputation: 781

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'>

Upvotes: 0

j08691
j08691

Reputation: 207861

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.

Upvotes: 2

Related Questions