Question

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?

Answer 1

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.