WordPress: creating a custom CSS

The recommended way of customizing your default WordPress theme is to create a child theme. However, sometimes we only need to add just a few style rules to override some default styles of our theme, so what we really need is to create a custom style sheet for our theme. Let's see how.

You shouldn't add your custom CSS to the theme directory, because you'll probably end up with having files which don't belong to the theme. A good solution is to put your CSS file just under your /uploads directory.

Add the following code to the functions.php file of your theme (create one if it doesn't exist):

add_action('wp_print_styles', 'add_custom_css');

function add_custom_css() {

    $uploads = wp_upload_dir();

 $url = $uploads['baseurl'] . '/custom.css';
    wp_register_style('custom', $url);
    wp_enqueue_style('custom');

}

If you open your home page now and take a look at the source code inside the head tag, you'll see the new CSS file properly linked. The new CSS file comes just after the main style sheet of your theme. This is a must: in order to make your new style rules to override the preceding ones, a custom style sheet must come after the main style sheet. This is due to the CSS cascade: a CSS file that comes later in the source has an higher precedence over all the preceding ones.

For example, if you have the following rule in your main style.css file:

#header {
 height: 150px;
 background: #000;
}

you can override it in your custom CSS as follows:

#header {
 height: 100px;
 background: #c30;
}

The quickest way to achieve this is to copy the original style rules you want to change into your custom CSS file and modify them there. By doing so, you make sure that cascading and specificity will work as intended.