5.x common.inc drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE)
6.x common.inc drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE)
7.x common.inc drupal_add_css($data = NULL, $options = NULL)

Adds a CSS file to the stylesheet queue.

Parameters

$path: (optional) The path to the CSS file relative to the base_path(), e.g., modules/devel/devel.css.

Modules should always prefix the names of their CSS files with the module name, for example: system-menus.css rather than simply menus.css. Themes can override module-supplied CSS files based on their filenames, and this prefixing helps prevent confusing name collisions for theme developers. See drupal_get_css where the overrides are performed.

If the direction of the current language is right-to-left (Hebrew, Arabic, etc.), the function will also look for an RTL CSS file and append it to the list. The name of this file should have an '-rtl.css' suffix. For example a CSS file called 'name.css' will have a 'name-rtl.css' file added to the list, if exists in the same directory. This CSS file should contain overrides for properties which should be reversed or otherwise different in a right-to-left display.

$type: (optional) The type of stylesheet that is being added. Types are: module or theme.

$media: (optional) The media type for the stylesheet, e.g., all, print, screen.

$preprocess: (optional) Should this CSS file be aggregated and compressed if this feature has been turned on under the performance section?

What does this actually mean? CSS preprocessing is the process of aggregating a bunch of separate CSS files into one file that is then compressed by removing all extraneous white space.

The reason for merging the CSS files is outlined quite thoroughly here: http://www.die.net/musings/page_load_time/ "Load fewer external objects. Due to request overhead, one bigger file just loads faster than two smaller ones half its size."

However, you should *not* preprocess every file as this can lead to redundant caches. You should set $preprocess = FALSE when:

  • Your styles are only used rarely on the site. This could be a special admin page, the homepage, or a handful of pages that does not represent the majority of the pages on your site.

Typical candidates for caching are for example styles for nodes across the site, or used in the theme.

Return value

An array of CSS files.

See also

drupal_get_css()

28 calls to drupal_add_css()
aggregator_init in modules/aggregator/aggregator.module
Implementation of hook_init().
block_admin_display_form in modules/block/block.admin.inc
Generate main blocks administration form.
book_init in modules/book/book.module
Implementation of hook_init(). Add's the book module's CSS.
color_scheme_form in modules/color/color.module
Form callback. Returns the configuration form.
comment_render in modules/comment/comment.module
Renders comment(s).

... See full list

File

includes/common.inc, line 1870
Common functions that many Drupal modules will need to reference.

Code

function drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE) {
  static $css = array();
  global $language;

  // Create an array of CSS files for each media type first, since each type needs to be served
  // to the browser differently.
  if (isset($path)) {
    // This check is necessary to ensure proper cascading of styles and is faster than an asort().
    if (!isset($css[$media])) {
      $css[$media] = array('module' => array(), 'theme' => array());
    }
    $css[$media][$type][$path] = $preprocess;

    // If the current language is RTL, add the CSS file with RTL overrides.
    if ($language->direction == LANGUAGE_RTL) {
      $rtl_path = str_replace('.css', '-rtl.css', $path);
      if (file_exists($rtl_path)) {
        $css[$media][$type][$rtl_path] = $preprocess;
      }
    }
  }

  return $css;
}

Comments

dman’s picture

Although it appears tidy - and appears to work - if you use drupal_add_css() within your own tpl files, this is incompatible with css caching and will cause problems when you go-live.

The most common place to use drupal_add_css() is in a modules hook_init(). Although that results in it being included every time, it is preferable to the alternative. related discussion
Some modules do manage to include it on-demand by using it within their theme_*() functions. Results when doing this with css aggregation on need testing for your individual cases.

timmillwood’s picture

To load a CSS file within your module.

<?php
function my_module_init(){
  drupal_add_css(drupal_get_path('module', 'my_module') .'/my_module.css');
}

note: hook_init runs on every page load, if you only want to load the css on a specific page, put the drupal_add_css() there.

starmonkey’s picture

For adding css to certain pages (like the front page) from your theme:

"Adding styles through the API"
http://drupal.org/node/225868

doublejosh’s picture

Here's the theme snippet I use to add in additional separate node-type specific and occasional node ID specific files that don't get added to the aggregated master... provided you don't include the filenames in your .info file.
This is a great way to cut down on master CSS aggregation bloat. Depending on your situation you should probably not do this for all node types.

function MYTHEME_preprocess_node(&$vars, $hook) {

  // $path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE

  drupal_add_css(
    path_to_theme() .'/css/types/'. $vars['node']->type .'.css',
    'theme', 'all', FALSE
  );

  drupal_add_css(
    path_to_theme() .'/css/nodes/nid-'. $vars['node']->nid .'.css',
    'theme', 'all', FALSE
  );

}

Though I don't see a file_exists test for this file in the drupal_add_css function is does not include the file as a link in the head if it doesn't exist.

bdichiara’s picture

Is it possible to specify IE Conditional Comments when loading stylesheets with this function? If not, what is another decent solution from doing this within a module?

jlyon’s picture

Look at http://drupal.org/project/conditional_styles if you haven't already.

edgar_estor’s picture

You can actually load the specific css and java script in a specific theme by just putting them inside the page-mypage.tpl.php. If you have a module that reside only to specifc page create a page template. You can call the css or java script within the module if you prefer to organize them as such.

Taiger’s picture

Please do not do this. It is bad practice and will kill performance.
Another way is to use a module like Context:
http://drupal.org/project/context
Context will let you load resources, templates and blocks in contexts which can be triggered by url, role, etc..

alisamar’s picture

is there any way to add special attributes like rel or id ?

vijaycs85’s picture

drupal_add_css() of Drupal 6 doesn't support external CSS. One way of adding external CSS is drupal_set_html_head()