Understanding CSS in Drupal

Cascading style sheets (CSS) are a standard technology for controlling the presentation of web pages. When a page is called by a browser, one or more .css files provide information about how the content on the page should be displayed. The specifics of CSS are beyond the scope of this guide. For a general overview, see the Cascading Style Sheet article on Wikipedia.

A CSS file in a Drupal theme is no different than any CSS file on the web. However, the procedure for adding a CSS file to a theme is unique to Drupal. Drupal 5 (and earlier) and Drupal 6 (and later) have different procedures for adding a CSS file. Consult the version-specific guides for more information.

Some modules (both core and contributed) provide their own default CSS files for controlling the presentation of the content they generate. While you can theoretically edit these files directly, it is highly recommended that you "override" a default .css file by copying (not moving) it to your theme's directory.

In some cases you may find that the HTML markup generated by a module does not provide the selectors that you require for your CSS. For example, a module might apply just the standard <h2> tag to mark a heading, whereas your design requires that the heading be marked up with <h2 class="myClass">. You can override the module's default output, so that your preferred selectors appear as part of the HTML markup. Overriding module output is one of the main topics discussed in this guide. Drupal 6 has a greatly simplified procedure for overriding default module output. Consult the version-specific guides for more information.

There are a number of tools and techniques which can make it much easier to work with CSS in your theme. For more information, see Tools, best practices and conventions.