How to load style.css root directory in WordPress page.php, single.php in contents

Question

I am making a WordPress theme. But I have a problem. style.css stylesheet is not loading in page.php contents. When I edit a post in wp editor and add <div class=w3-red"> <button class="w3-btn w3-red"> and more related codes. When I published a post, they are not showing on front-end. I think WordPress doesn't support the page style customization option with wp editor. I have also added my own style.css in header.php.

I am using w3.css stylesheet in my web root directory. style.css

<div class="w3-card w3-red"> Hello </div>

This code in not loading in frontend.

Answer 1

Please refer this link

or

Just put your stylesheets (style.css) in a directory wp-content\themes\[YOUR_THEME]\css\. Then you can link stylesheet through simply put below code (theme header.php file).

 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css" />

Answer 2

Your style.css when you creating a theme it must be in on the same folder as your index.php

in your head load the style using:

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

if your stylesheet is on css folder load it using this :

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/folder/name.css">

Answer 3

Another way is accessing image using css file location as the reference point, e.g.

.class-name{

background-image:url("../images/file-name"); //one level up, then images folder

background-image:url("../../images-directory-02/images/file-name"); //two levels up, then two folders in

}