We will be adding the CSS to the mysite module as created in the previous recipe. Create two CSS files named mysite.css and mysite_special.css inside the mysite module's folder and populate them with some sample rules.

Add the following code to the mysite module:

/**
* Implementation of hook_init().
*/
function mysite_init() {
// The path to the mysite module.
$path = drupal_get_path('module', 'mysite');
// Include mysite.css.
drupal_add_css($path . '/mysite.css');
// Include mysite_special.css, but do not preprocess.
drupal_add_css($path . '/mysite_special.css', 'module', 'all', FALSE);
}

Save the file and visit the site to check if the two CSS files are now included.

The drupal_add_css() function is used to add CSS files from a module. Its syntax is as follows:

drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE)

The documentation for this function explains each of the parameters:

In our snippet, we first get the path to the mysite module using drupal_get_path() and with the result, can obtain the complete path to mysite.css. We can now add this CSS file using drupal_add_css().

The next CSS file—mysite_special.css—is as the name suggests, a special file, that we do not want to be preprocessed. This could be because we are going to be including it conditionally, or perhaps, because we have encountered quirks in certain browsers when this file is aggregated. Consequently, we can use the following syntax to instruct Drupal to avoid preprocessing this file.

drupal_add_css($path . '/mysite_special.css', 'module', 'all', FALSE);

Looking at the source code of a typical page on the site when CSS optimization is enabled, we should see the stylesheets included similar to the following transcription:

<link rel="shortcut icon" href="/mysite/misc/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/mysite/sites/all/modules/mysite/mysite_special?8.css" />
<link type="text/css" rel="stylesheet" media="all" href="/mysite/sites/default/files/css/css_32c93f4662aecdab9e9b87330ae5f157.css" />
<link type="text/css" rel="stylesheet" media="print" href="/mysite/sites/default/files/css/css_456756789c4eab1267644ab3f147a231.css" />

As the preceding markup attests, the mysite_special.css file is never aggregated while plain old mysite.css is always aggregated.

Besides adding external stylesheets, the Drupal API also allows for adding inline CSS.

drupal_set_html_head('<style type="text/css">body { color: #000; }</style>');