none of my css is working in my child theme

Question

I have the latest versions of WordPress and Zerif Lite installed. I have not altered them. I made a directory in the themes folder called zerif-lite-child. I made a functions.php file. The code in the functions.php file was copied from here: http://docs.themeisle.com/article/14-how-to-create-a-child-theme. I also made a style.css file. This is the code in it:

/*
 Theme Name:   Zerif Lite Child
 Theme URI:    N/A
 Description:  Zerif Lite Child Theme
 Author:       Jacob Franklin
 Author URI:   http://www.jacobrfranklin.com
 Template:     zerif-lite
 Version:      0.1
 License:      GNU General Public License v3
 License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 Tags:         one-column, two-columns, right-sidebar,front-page-post-form,full-width-template,rtl-language-support,sticky-post,theme-options, custom-background, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, footer-widgets, portfolio
 Text Domain:  zerif-lite-child
*/

#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+1) .latestnews-title a:before {
    background-color: #0d6860;
}
.navbar-nav>li>a {
    color: #7b7b7b;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: #0d6860;
}
.company-details a:hover,a:focus,a:active {
    color: #ffffff;
}
.red-btn{
  background-color:#bf8003;
}
.green-btn{
  background-color:#0d6860;
}
.red-btn:hover{
  background-color:#fcb72c;
}
.green-btn:hover{
  background-color:#19c2b4;
}

I also customized a few things in the customize section of the dashboard (under appearance.) None of the css in my style.css file is being applied. I'm sure the mistake is probably obvious or stupid, but I just can't figure it out. The exact same css worked fine before I made the child theme when I used it in the Simple Custom CSS plugin, but I would rather make a proper child theme. Please help.

Answer 1

It looks like the code you copied from is missing the part where your child theme styles are actually added to WordPress. It's a little strange they skipped over this, mind you!

From the WordPress Codex article on child themes, you just need to modify your style enqueueing function so it includes this:

wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style )
);

You'll want to put that in your code directly after the wp_enqueue_style() call that is already there.

Unless there's something else going wrong somewhere, that should be all that's now required, but it might be worth looking through that Codex article to see if there's anything else you might not have done yet.