How to add custom CSS to each page All,

I complete Drupal 7 newbie here.

I am tackling the themeing of our website (using Adaptive/ Sky theme). Now previously I would have loaded up all the CSS files in the sky.info file but then read that all the stylesheets in theme info file get loaded on every page.

What I want is to load each unique page's CSS on that page only. Example being the 'Home Page' would have its own unique CSS, same for 'About Us', 'Contact Us' pages etc.

As per my research, I am meant to use 'drupal_add_css' function in the template.php file, however, I dont know PHP &amp; have no idea how to add the if condition that each page's alias should dictate which css file is preprocessed &amp; loaded.

Any guidance would be great.
An easier way to address multiple CSS loads, is to cache and compress the CSS. You can do so by going to /admin/config/development/performance and selecting "Aggregate and compress CSS files"

But if you must have them load on separate pages I'd recommend doing it the Drupal way; separating them by content types or blocks, forms, not by URI. The simplest way to do it, is to use Theme Hooks.

For instance, to include a yourthemedirecotry/css/MYTYPE.css for content type MYTYPE;


Copy /modules/node/node.tpl.php into your theme directory and rename it to node--mytype.tpl.php.
Insert &lt;?php drupal_add_css(path_to_theme() . '/css/mytype.css', array ('group' =&gt; CSS_THEME)); ?&gt;
Don't forget to flush cache.


From now on, nodes with content type MYTYPE will include a yourtheme/css/mytype.css.

Likewise, you can insert CSS into specific blocks, fields, page. For more options, see Theme Hooks and drupal_add_css.