How does a Child Theme works?

Question

I created a child theme and installed it but I don't know how exactly it works!

For example, in the parent theme I have the code below:

.header {
   margin-top: 10px;
   margin-bottom: 10px;
   width: 300px;
   height: 150px;
   background: white;
   border-width: 5px;
}

And I want to not include the width: 300px; , the background and the border-width (because i don't want background and border) and change the "margin-top: 10px;" to "margin-top: 15px;" in the child theme.

So normally in the child theme I would have:

.header {
   margin-top: 15px;
   margin-bottom: 10px;
   height: 150px;
}

The subject is that if I do that WordPress will automatically check first the style.css of the child theme and then the style.css of the parent theme. So it will execute the missing code (width: 300px; , the background and the border-width).

What should I do? I am a bit confused. Do I have to delete each line I don't want from the parent theme? But if I do that after an update it will add it again.

Answer 1

You are correct, that WordPress will load the style.css file from your parent theme first, and then the style.css from your child theme. These means because of how CSS itself works, you have to specifically override any rule you wish to override.

What this means is that you would need to modify the CSS within your Child Theme's style.css to be:

.header {
   margin-top: 15px;
   margin-bottom: 10px;
   width: 100%;
   height: 150px;
   background: none;
   border-width: 0;
}

Answer 2

You may want to copy the header.php file to your child theme folder and look for and delete any style sheet imports from the parent theme. If you want the style sheets included import it in your child theme's style.css like so:

/* Import from parent theme styles first */
@import url('/path-to-parent-theme/style.css');

Then you can add all your CSS after. Your rules will override any of the ones from the parent.

You may also look at your functions.php for any importing of stylesheets. May look something like this:

wp_register_style( 'style',get_stylesheet_directory_uri() . '/style.css', false );
wp_enqueue_style( 'style' );

You can comment what you need out. You can use wp_deregister_style and wp_dequeue_style, but I've never gotten them to work.