[FIXED] Wordpress CSS styles not loading

Issue

I'm learning to develop a simple WordPress theme from an online course on Udemy. I'm very new to this and I am having difficulty trying to load my stylesheet and fonts.

The following snippet has been placed into my functions.php file

// Add StyleSheets
function gymfitness_scripts() {
    // Normalize CSS
    wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css', array(), false, 'screen'); 

    // Google font
    wp_enqueue_style('googlefont', 'https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,900|Staatliches&display=swap', array(), false, 'screen');

    // Main Stylesheet
    wp_enqueue_style('style', get_stylesheet_directory_uri(), array('normalize', 'googlefont'), false, 'screen');
}

// Hook the StyleSheet
add_action('wp_enque_scripts', 'gymfitness_scripts');

And the following has been placed in my CSS file.

/*
Theme name: Gym Fitness
Theme URL: 
Author: Jonathan Cajepe
Author URL: 
Description: Theme designed for the Gym
Version: 1.0
Licence: GNU  General Public Licence v2 or later
Licence URL: http://www.gnu.org/licenses/gpl-2.0.html
Tags: CSS Grid, Flexbox ready, mobile first, gym theme
Text Domain: gymfitness
*/

body {
    background-color: #ff0000;
}

:root {
    /** Fonts **/
    --mainFont : 'Staatliches', cursive;
    --textFont: 'Open Sans', sans-serif;
    --secondaryFont : 'Raleway', sans-serif;
 
    /** Colors **/
    --primary : #FF5B00;
    --darkGray: #2F2E2E;
    --lightGray: #EBEBEB;
 
    --white: #ffffff;
    --black: #000000;
 }


body {
    font-family: var(--textFont);

I can't see why my styles and fonts aren't loading. I've been made aware that this online course material is out of date.

Please see attached image to view my file structure File Structure

I'm just trying to load google fonts and simply change the background to red. And this is the result

Solution

Looks like spell mistake on code for wp_enqueue_script hook and other functions,

Kindly find modified script hook function below

// Add StyleSheets
function gymfitness_scripts() {
    // Normalize CSS
    wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css', array(), false, 'all'); 

    // Google font
    wp_enqueue_style('googlefont', 'https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,900|Staatliches&display=swap', array(), false, 'all');

    // Main Stylesheet
    wp_enqueue_style('style', get_stylesheet_uri(), array('normalize', 'googlefont'), false, 'all');
}

// Hook the StyleSheet
add_action('wp_enqueue_scripts', 'gymfitness_scripts');

Replace above code and check it,

1. Replaced "wp_enque_scripts" to "wp_enqueue_script" hook
2. Replaced get_stylesheet_directory_uri() to get_stylesheet_uri() function in your code.
3. Replaced last argument of wp_enqueue_style function to "all" instead of "screen"

Answered By - PHP Team