The Proper Way to Include CSS Styles in a Child Theme

When creating a child theme in WordPress, there are a few important things to keep in mind. However, the most crucial one is ensuring that the CSSCSS CSS is a design language used to control the appearance and formatting of a website. It's used to define colors, typography, layout, and other visual aspects. CSS is either inserted directly into the HTML code or can be added as external .css files referenced by the HTML code. styles of the parent theme are properly inherited. So, the obvious question is: how do you include them in the child theme?

How not to do it

The simplest and most commonly found method on the internet is using the @import rule in the style.css file of the child theme:

@import url('../my_theme/style.css');

This method is no longer recommended because it increases the webpage’s loading time and does not work well in older browsers.

The correct way

The proper way to include CSS styles in a child theme is as follows:

1. Open the functions.php file of your child theme.
2. Add the following code:

/* Importing CSS styles from the parent theme */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    if ( is_rtl() ) {
        wp_enqueue_style( 'parent-style-rtl', get_template_directory_uri() . '/rtl.css' );
    }
}

The code above also imports styles for RTL (right-to-left) languages such as Hebrew and Arabic.

(Sources: Ulrich and WordPress itself)