How to add custom css file in theme?

Question

Some themes ask you not to edit the style.css file, instead use custom.css file. If you write code on custom.css, it will overwrite the same element style in style.css. I think this is done in order to prevent the loss of user styles on theme update, is it so?

How this works? Do they already include custom.css file in their theme? But how this file is included in the theme so that he theme look for style in custom.css first? Thanks.

Answer 1

I usually add this piece of code if I want to add another css file

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

Answer 2

If you want to leave your html along. you can add this to your css file. I think this is better.

@import url("../mycustomstyle.css");

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential, so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

Answer 3

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.