3

I have a webpage that is generated by Drupal and it comes with a certain stylesheet attached to it.

I would like to override one of the styles. It is set with a class like this:

<div class="description"></div>

So instead of using the ".description" style that comes with the Drupal CSS, I would like the page to use my ".description" style. In other words - if the page has 2 ".description" styles, how do I tell the page to use mine?

Carlos Muñiz
  • 1,858
  • 9
  • 25
  • 29

1 Answers1

17

  1. Use a selector with higher specificity:

    div.description {
    /* will take precedence over just .description */
}

  2. Place your stylesheet after the one you want to override:

    /* Drupal's style */
.description {
    foo: bar;
}

/* Your style */
.description {
    foo: baz; /* takes precedence over foo: bar */
}

  3. Do not use !important. Just don't.

See also CSS 3: Calculating Selector Specificity.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • 2
    when I look at the source code of the generated page, my stylesheet is the last one declared, and yet my .description style is not the one being used. any ideas? – Carlos Muñiz Jun 12 '11 at 19:33
  • Nope. Do you have a link? If not, use Firebug or Chrome/Safari dev tools to dig through the applied styles. – Matt Ball Jun 12 '11 at 19:43
  • Out of pure curiosity, what's so bad about using `!important`? **Edit**: [Nevermind, I'll see myself out](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css). – h2ooooooo Jun 27 '13 at 09:00