Adding style sheets from .info files

Last updated on
22 December 2016

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

This page explains how to add a style sheet using the .info file of a theme. To add a style sheet programmatically, see the API functions page. Styling themes purely through CSS is possible with the information provided here.

Notes:

  • When working with style sheets, make sure that CSS Optimization is disabled. CSS Optimization aggregates all of the style sheets for a site in order to improve performance. When CSS Optimization is enabled, no changes to your style sheets will be reflected on your site until the aggregated styles are cleared. You can enable CSS Optimization again when you're done modifying your style sheets. For Drupal 7 it is located in "Administer > Configuration > Development > Performance".
  • The .info file is cached. Adding or removing any styles will not be detected until the cache is cleared and the revised .info is read. (Do not confuse this with the theme registry.) You must clear the cache to see the changes.
Adding style sheets:

In Drupal 6, by default, a "style.css" file will be used from your theme when no other styles are defined inside the .info file. In Drupal 7, the style.css file will be used only if it is specified in the .info file. Adding other styles is as simple as defining a new 'stylesheets' key with its media property and the name of the style sheet. Keep in mind that defining custom styles will prevent the default "style.css" from loading. Remember to explicitly define the default style sheet if your theme uses it.

; Add a style sheet for all media
stylesheets[all][] = theStyle.css

; Add a style sheet for screen and projection media
stylesheets[screen, projection][] = theScreenProjectionStyle.css

; Add a style sheet for print media
stylesheets[print][] = thePrintStyle.css

; Add a style sheet with media query
stylesheets[screen and (max-width: 600px)][] = theStyle600.css
    

A few notes:

  • Note the empty square brackets between the [media] and = styleName.css. These are always empty and denote that each stylesheet is appended to an array, as in php.
  • The order in which the styles are listed in the .info file will reflect the order it is displayed on head of the page.
  • The style sheets can be placed in sub-directories, i.e., stylesheets[all][] = stylesheets/styleName.css. Useful for organizing style sheets.
  • However, it is recommended that sub-directories be kept to one level, i.e.,stylesheets[all][] = css/foo/styleName.css may cause a problem with some templates. Safer is stylesheets[all][] = css/styleName.css or stylesheets[all][] = foo/styleName.css.
  • The word "style" can not be used in the name, like "myown_style.css". It will conflict with the default style.css. Anyhow, myownstyle.css will work.
Adding external stylesheets
To use a stylesheet external to your theme, such as one hosted on a CDN, you cannot use the themes .info file. Instead you can add this in template.php. In Drupal 7 do this as follows:
function mytheme_preprocess_html(&$variables) {
  drupal_add_css('http://fonts.googleapis.com/css?family=News+Cycle', array('type' => 'external'));
}

Help improve this page

Page status: No known problems

You can: