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?

Answer 1

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.