alex garden
alex garden

Reputation: 21

How to avoid using styles of a specific css file for a specific div?

I have a webpage which has 2 css files called style1.css and style2.css . In the webpage there is a div that should not use styles which are in style2.css. How can i do this?

Upvotes: 1

Views: 320

Answers (2)

Rounin
Rounin

Reputation: 29463

[...] there is a div that should not use styles which are in [...]

This is the art of CSS architecture.

You need to give some thought to:

  • the order in which you write rules; and
  • how you write the selectors for those rules

A good approach is to write your rules, in order from:

the most general => ... to ... => the most specific

That is, you will start with the most general, most widely-applied rules at the top of the cascade and then, as you proceed down the cascade, gradually zero-in on exceptions on a more and more granular basis.

e.g.

p {
  font-size: 16px;
  font-weight: 400;
}

h2 + p {
  font-weight: 700;
}

footer h2 + p {
  font-size: 12px;
  font-weight: 400;
}

The example above declares three style rules:

  • Unless otherwise stated, <p> elements should have a font-size of 16px and a normal font-weight
  • the exception to the first rule above is when a <p> element immediately follows an <h2> element, in which case it should have a bold font-weight
  • the exception, in turn, to the second rule above is when the <h2> element followed by the <p> element is, itself, contained in a <footer> sectioning element, in which case it should have a normal font-weight after all, but also have a smaller font-size of 12px

Using this approach you will find that, most of the time, you won't need to undo styles you have already applied because you will never apply the styles until you need them.

Upvotes: 2

Nicolas
Nicolas

Reputation: 25

don't call the second css file on that page. Or give the div a unique id and only write styles for it in style1.css

Upvotes: 1

Related Questions