To add a custom CSS to the Drupal 7 website

When we go to chat rooms or forums, we often encounter questions about how to add a custom css--to a Drupal site. Generally speaking, it's best to add it through Drupal themes. In some cases, however, there are other options that may have to be considered because of environmental limitations or if the site administrator does not have permission to access the subject file.

Today this article describes how to use the CSS Injector module to add custom CSS to a Drupal 7 site.

Whether CSS Injector or CSS Editor, can be used as a temporary way to add and adjust CSS, but in the end should be added through the theme CSS files.

First step: Install and enable the CSS Injector module

Download this module from the CSS Injector project page

To access the Module Management page, locate the CSS Injector module, click the Duplicate box to select

Drag the page down to the bottom and click Save to enable CSS Injector

Step Two: Add custom CSS

When the CSS Injector module is enabled, go to the "configuration > CSS Injector" page to start using CSS Injector. Click on the Create a new rule link to begin adding a newer CSS rule.

After filling in the title and CSS code of the CSS rule, specify the theme using these CSS through the settings in the Themes to show on section

By default, the added CSS will take effect on all pages, or you can select the page that the CSS takes into effect as needed

Click "Save" after completing all content.