Including a CSS file in a theme

This recipe details the steps involved in adding a CSS file to the theme via its .info file. In this case, we will be adding a CSS file to the mytheme sub-theme which we created earlier in this chapter.

Getting ready

Create a CSS file inside the theme's folder named mytheme.css and add the following example rule to it:

* {
color: #996633 !important;
}

This rule should override and change the color of all text on the page to a brownish hue.

How to do it...

Adding a CSS file to a theme is best accomplished via its .info file. Navigate to the theme's folder at sites/all/themes/mytheme and open the mytheme.info file in an editor. Add the following line to this file to include our CSS:

stylesheets[all][] = mytheme.css

Tip

If the CSS file is stored along with other stylesheets in a sub-folder named css, the syntax would include the relative path to the file as follows: stylesheets[all][] = css/mytheme.css.

Once done, save the file and exit the editor. Since we have modified...