Last updated January 29, 2013. Created by LeeHunter on August 28, 2007.
Edited by davidneedham, dan3h, JohnNoc, earthday47. Log in to edit this page.

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 6 it is located in "Administer > Site configuration > Performance".
    • 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 head of the page will reflect the order it is defined here.
  • 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.

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:
<?php
function mytheme_preprocess_html(&$variables) {
 
drupal_add_css('http://fonts.googleapis.com/css?family=News+Cycle', array('type' => 'external'));
}
?>

In Drupal 6 you cannot specify a stylesheet as being external. Instead you will need to use the theme_preprocess_page to add a <link> element as follows:
<?php
function mytheme_preprocess_page(&$vars, $hook) {
 
$vars['head'] .= '<link '. drupal_attributes(array(
   
'rel' => 'stylesheet',
   
'type' => 'text/css',
   
'href' => 'http://fonts.googleapis.com/css?family=News+Cycle')
  ) .
" />\n";
}
?>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

The Drupal 6 snippet is wrong. There's no theme_preprocess_html() function, it has to be put in theme_preprocess_page().

EDIT: I edited the page itself, so it's right now.

-Wes

I am having an issue with the D7 code. I am attempting to point to my sites folder to access my custom css file. here is what I have

<?php
     
function mytheme_preprocess_html(&$variables) {
       
drupal_add_css('http://www.website.com/sites/default/themes/css/css?family=News+Cycle', array('type' => 'external'));
      }
?>

For some reason the css file cannot be access. When I move the style sheet to the theme/css and edit the .info file the stylesheet can be accessed.

I am not really sure how this code works. The actual file path to the file is http://www.website.com/sites/default/themes/css/my_css.css

The folders have a permission set to 755 for all folders and the css file.

Any ideas?

Spineless

It sounds like you are trying to link to that css externally because you know the folder path but not about the characters Drupal added.

Even with the performance settings off, and the settings are right in drupal 7, you will notice that by looking at the rendered code in your browser that Drupal has added some extra characters to the css file (example: http://www.website.com/sites/default/themes/css/my_css.css?7thusik). Right click in your website and click view source. Look in the head section above the body and you will see what i am talking about. I don't exactly know the reason why. It may be for security, rights protection to css design, performance or just PHP reasons. It might even be in our best interest for it to be that way.

Try changing the prefix of the function 'mytheme_preprocess_html'. The prefix 'mytheme_' should be replaced with your theme.

For example, if your theme is stored in a directory named 'greenhatwebs', then the function would be 'greenhatwebs_preprocess_html'.

We had this problem too. I found this solution on Overriding themable output: http://drupal.org/node/341628

Ken

This:

<?php
     
function mytheme_preprocess_html(&$variables) {
       
drupal_add_css('http://fonts.googleapis.com/css?family=News+Cycle', array('type' => 'external'));
      }
?>

didn't work for my drupal 7.

but that:

function mytheme_preprocess_html(&$variables) {
drupal_add_css('http://www.somewhere.com/style.css', array('group' => CSS_THEME, 'preprocess' => FALSE));
}

did.

Awesome man! That worked for me too! Thx!

Having had no Drupal experience at the time, I have not found a more useful bit of documentation on drupal.org than this:

  • When working with style sheets, make sure that CSS Optimization is disabled. It is located in "Administer > Site configuration > Performance". 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.

Trying to reverse engineer a site when you can't figure out where the styles are coming from is incredibly frustrating. Turning off CSS Optimization made it instantly possible to inspect elements, figure out which stylesheet(s) are creating any given style, and then edit the CSS files.

Thank you to mariolina for your edit of the above text which, while simple, was profoundly helpful.

I did a lot of digging, looking for this post in order to alter my css effectively. Thank you, mariolina and gohlkus!

Hey everyone,

Hopefully this is the right place for my question.
I am trying to add .css file to a specific (internal basic page) in drupal7 with no success.
After enabling the clean url paths and add a path for my internal basic page i am able to capture the path using

$path=drupal_get_path_alias();

After that, i am trying to put condition statements so when a specific path is loaded a specific .css file is loaded.
so i have this piece of code in ninesixty_preprocess_page(&$vars, $hook) method in template.php file.

if($path == 'about/advantages')
{
drupal_add_css(drupal_get_path('theme', 'ninesixty') . "/page-about.css");
}

I have tested the if statement by echoing the $path variable with total success.
But the page-about.css file does not load at all.
Please note that i am using drupal with WAMP server.
Also the page-about.css file is located in drupal/sites/all/themes/ninesixty/styles/framework.
Any suggestion will appreciated. I am a bit newbie in drupal :S
Thank you

When I tried to add CSS with absolute path ( /misc/vertical-tabs.css ) Drupal 7 behaved strangely: it did not add CSS in the style tag but added it to Drupal.settings.

Is it intentional? Were CSS absolute paths in theme.info discussed somewhere?

I am having an issue trying to get my add .css file to work. I posted an issue on the support forum before I fell across this thread. Perhaps some of your experience could aid me.

http://drupal.org/node/1847162

I am having the same issue. I have made changes to implement a background image. I have found code samples so I am reasonably sure the code is correct. I put the change into the style.css file but I don't see the changes. I then put them into the local.css file but still no luck. I suspect there is something about how Drupal loads/processes css files that is tripping me up. Can someone explain or point me to a link that would explain this? Would greatly appreciate your help.

I am using Drupal 7.

I created a simple module and added "style.css" as stylesheet (stylesheets[all][]=style.css).

This didn't work. I struggled a lot to find out the reason (I did all clear cache, browser cache clean etc).

Then I changed the name from "style.css" to ".css" and made the appropriate change in .info file. To my surprice it started working.

What is the problem with "style.css"?

I have same problem.
It looks like duplicate values in stylesheets[all][] overrides each other. So, if you have one module with stylesheets[all][]=style.css and second module with same string, than css of first module will not be loaded.
I also solve this problem by using different names of css files in my modules.

I add the stylesheets[all][] = theStyle.css below the listing of the other stylesheets in my theme and it did work.
It had to be below the others not above.

Thanks!

Thanks for this explanation of the lines in the theme.info file. I had already been using a few additional stylesheets, but found my way here Googling a strange phenomenon I suddenly encountered when trying to implement a page search on one site: although the on rest of the site, styles are loaded, as you point out, in the listed order, the addt'l style sheets are loading in reverse on my search results pages. This is a bit of a problem and I have no idea why it's happening. Anyone have any insight?