Last updated June 23, 2016. Created on December 1, 2008.
Edited by patil_kunal27, camorim, batigolix, davidneedham. Log in to edit this page.

Most modern web pages use external style sheets to control the presentation of a page. In a traditional static HTML page, a pointer to a style sheet must be manually placed within the HTML code (usually within the page header).

Here's an example:

<link rel="stylesheet" type="text/css" href="/mytheme.css" />

This code simply tells the browser where to find one of the style sheets (mytheme.css) that controls the appearance of the page.

To the browser, a page from a Drupal site might look exactly the same: the HTML header has the same kind of pointers to external style sheets. The key difference is that behind the scene, those pointers are added to the HTML automatically. Some styles might come from the theme itself and others might be supplied by various Drupal modules (to provide default styling for the module output).

You can add new style sheets to a theme and you can override a default style sheet from Drupal core, contributed modules or even another theme.

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'));
}

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