Last updated March 30, 2015. Created on June 3, 2014.
Edited by mpgeek, camorim, er.pushpinderrana. Log in to edit this page.

On previous page we learn how to add css using .info file and drupal_add_css(). Adding custom CSS to a page is easy in Drupal, but can be a little bit messy when caching is enabled there and you need to choose best approach to use.

Adding css using #attached attribute

Drupal 7 introduced rendered arrays and one of the special elements of a render array is the #attached attribute. Best thing about this attribute is it make sure your css would always be included because it comes with rendered array.

Adding CSS to a cached block

Sometimes we try to add css using drupal_add_css() inside hook_block_view() but it not included because block is cached.

Here is an example of cached block without #attached

<?php
function foo_block_view($delta = '') {
  if (
$delta == 'foo_delta') {
   
drupal_add_css('path/to/my.css');
   
$block = array(
     
'subject' => t('Foo title'),
     
'content' => '<p>' . t('Lorem ipsum text.') . '</p>',
    );
    return
$block;
  }
}
?>

Initially above code will work, but if you turn on caching, or if you have defined your block to be cached in hook_block_info(), the my.css will fail to be included.

Now #attached attribute can resolve this problem because it associated with rendered array that always rendered.

Here is example of #attached attribute

<?php
function foo_block_view($delta = '') {
  if (
$delta == 'foo_delta') {
   
$block = array(
     
'subject' => t('Foo title'),
     
'content' => array(
       
'#markup' => '<p>' . t('Lorem ipsum text.') . '</p>',
       
'#attached' => array(
          
'css' => array('path/to/my.css'),
        ),
      ),
    );
    return
$block;
  }
}
?>

Now content element coming as a render array having two elements #markup and #attached both will always be included. We can add internal, external and inline css using this attribute.

We can also add css to page in similar way.

<?php
 $content
= array();
 
$content['#attached']['css'] = array(
   
$path . 'my.css' => array(
     
'group' => CSS_AGGREGATE_THEME,
     
'weight' => 999
   
),
  );
  return
$content;
?>

Even in Drupal 8, adding css to the page should now be done using the #attached property of a rendered array. You can checkout this here.

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