71 | Linking or Enqueuing Stylesheet in WordPress Themes

There are several ways of adding a stylesheet to a WordPress theme;
examples:

A: linking the stylesheet (in the head section of header.php)

– linking the main stylesheet style.css:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

or

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory(); ?>" />

– linking another stylesheet custom.css:

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/custom.css" />

B: enqueuing the stylesheet (in functions.php)

– enqueuing the main stylesheet style.css of a theme:

function theme_styles() {
	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

– enqueuing another stylesheet custom.css of a child theme:

function child_theme_styles() {
	wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles', 20 );

C: using @import in an existing stylesheet

– example linking the parent theme’s style.css in a child theme’s style.css

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

Resources:

WordPress Theme Development – style.css
link html
enqueue stylesheet
@import