wp_enqueue_style WordPress

In the HTML it’s easy to add assets, you can add your styles and JS like HTML

But in WordPress use the different way to adding CSS and JS, It’s not difficult.

In the custom Theme have functions.php file, this file runs everything for your website.

To adding CSS and JS file or Enqueue Style and Script follow the steps:

function addingCss(){
    wp_enqueue_style('styleSheet',get_template_directory_uri().'/style.css',array(), filemtime(get_template_directory().'/style.css'), 'all');
}

add_action('wp_enqueue_scripts', 'addingCss');

Note: wp_enqueue_scripts is compulsory.


let's easy to understand 

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

first make your own function 
example : function abc(){

}
Okay!


inside the function abc(){

} 
Add the wp_enqueue_style();


let's see

inside the function abc(){
wp_enqueue_style();
}

Now it's easy to add paramaters 

fisrst add anything name but should be unique with other.

inside the function abc(){
wp_enqueue_style('abcStyle',);
}

Second tell where is your file is located 
it's easy to add path by function just call get_template_directory_uri(), This path comes your theme folder.

function abc(){
wp_enqueue_style('abcStyle',get_template_directory_uri().'/style.css');
}

it's done.

but complete the all details.

Third Depandancy 
if your stylefile have any dependancy you should apply. 

wp_enqueue_style('abcStyle',get_template_directory_uri(),get_template_directory_uri().'/style.css','jquery');

Note. if you added the dependancy jquery then you don't need to add additionally next one.

in this case not have any dependancy so let leave empty.

function abc(){
wp_enqueue_style('abcStyle',get_template_directory_uri(),get_template_directory_uri().'/style.css',[],);
}

Fourth file version
there is two option you can add manually version or dynamacally 
I'm using both 



note:- it's the good way, if you change any changes on abcStyle file then WordPress automatically refresh the css file.

there is used filemtime() function, it's return the unique number if any changes so you need to provide the file name inside function.

or 
wp_enqueue_style('abcStyle',get_template_directory_uri().'/style.css',[], 1.0,);
}

note:- you need to hard Refresh to update changes (ctl+U abcStyle click and open and refresh).

Fifth Media
Add all it's for all Devices, mobile, Laptop etc.


Really it's easy

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

wp_enqueue_style( 'just unique title', 'file location', 'if dependancy (jquery) or empty []', 1.0, all );

In Short.
1. Title or handaler name anything unique.
2. path of stylesheet get_template_directory_uri().'/style.css'.
3. dependancy if no []  or example ('jquery').
4. version. 1.0 anyting, or filemtime(get_template_directory().'/style.css').
5. media all.


In last.

function abc(){
wp_enqueue_style('abcStyle',get_template_directory_uri().'/style.css',[], filemtime(get_template_directory().'/style.css'), all);
}
add_action('wp_enqueue_scripts', 'abc');

the reference style flow the WordPress Developer

wp_enqueue_style()

Now including JS File

Everything is the same but in the last parameter Boolean true or false

if you do true then this script displays or include in the footer or false then display or include in header.

function abc(){
wp_enqueue_script('customJs',get_template_directory_uri().'/custom.js',['jquery'], filemtime(get_template_directory().'/custom.js'), ture);
}

Depandancy
example bootstrap file have jquery dependancy file then add the jquery on this field for js.

inside asset

get_template_directory_uri().'/assets/custom.js'

It's done.

the reference script flow the WordPress Developer

wp_enqueue_script()

you may interested in

WordPress | how to display page content in a custom page

What is wp_register_style and wp_register_script ? Why need to used insted of wp_enqueue_style and script?

Yes, there is no more reason and not much more diffirent.

it’s easy to use and benefit to develop advance theme

if you have a different template and different CSS then you need to apply your CSS not default or another CSS. if your template exits on visitor click then apply your css

let’s see example:

your additional template product.php

you have product.css

and you need to apply the product.css while click on the product page.

then it’s the good option to use wp_register_style

let’s see how.

<?php
wp_register_style('product-css',get_template_directory_uri().'/assets/product.css',
    filemtime(get_template_directory().'/assets/product.css'),'all');

wp_register_script('custom-js',get_template_directory_uri().'/assets/custom.js',
    [], filemtime(get_template_directory().'/assets/custom.js'), true);

if (is_category('product')){
    wp_enqueue_style('product-css');
}
?>