How to make CSS modifications the proper way

If you make CSS modifications in the style.css, they will be overwritten if you install a new version of a theme. To avoid such problems it is recommended to make modifications in an alternative .css file. The following instructions show you how you can prepare your theme to do so.

Step 1: 
Creation of an alternative .css file

Open a (text)editor, create a new file and save it as .css (in our example local.css) in the root directory of your theme (sites/all/themes/themename).

Creation of local CSS file
Step 2: 
Edit the theme .info file

Use a (text)editor to open the theme .info file (sites/all/themes/themename/ Add the following line after the last line ending with.css:

stylesheets[all][] = local.css
Activation of local CSS file in
Step 3: 
Clear cached data

Go to Configuration > Development > Performance and "Clear all caches".

Drupal "Clear all caches"
Step 4: 
Add CSS code to local.css

Now you can start to add CSS code to the local.css. Since it is the last file in the sequence, the code in the local.css will be applied last and as such has priority.

Adding of CSS code to local CSS file

Drupal themes to be compared