How to use custom css (and never edit styles.css)

//How to use custom css (and never edit styles.css)

How to use custom css (and never edit styles.css)

When you use a theme (for example for WordPress), try never to edit the style.css or styles.css file. The reason is pretty simple:

If you ever need to update or re-install the theme, all your changes will be gone. Which will make you cry.

Below we quickly discuss how to use custom css using the custom.css file.

How to use custom css files

CSS has a priority system. This means that some stylesheets (css files) have priority over others.

Most themes you can but include a custom.css file that overrides the usual css file. For example. Your regular styles.css might say:

#logo { height: 200px; }

If you think this is too big, leave the styles as it is, and simply ass this to the custom.css:

#logo { height: 100px; }

This will result in the custom.css overriding the styles.css.

Open your custom.css in WordPress by going to Appearence > Editor > scroll down:

Selection_093

 

Updating or re installing the theme

Let’s say you want to:

  • Re install them theme because it is broken
  • Update the theme because of a new security update
  • Use the same template with the same edits on a different website

If you used the custom.css file, simply copy the content of your own custom.css to that of the website you want to have your edits.

Themes without custom.css

You have 2 options:

  • Check your theme options for ‘custom css’ fields
  • Add a custom.css yourself

For the first, open the theme options of your theme and check if they mention css anywhere.

For the second, simply upload en empty custom.css to /wp-content/themes/YOUR THEME NAME/. It will then appear inside wordpress under Appearence > Editor.

By | 2018-07-24T15:32:46+00:00 April 9th, 2015|0 Comments