Wordpress custom CSS for specific page not loading-CodePudding

I am trying to change some css for a specific wordpress page. It should be that I can just add .page-id-# before the new css rule. It seems simple but I just can't get it to work. I've tried different selectors, adding !important, trying different browser, checking the id, trying different pages etc but the custom css never loads.

Eg. In the code I've tried below the text on page 2 should be blue rather than red but the custom css doesn't load and so it stays red. Am I missing something obvious?

Page 1 -------------------------------

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />

    <?php
    wp_head();
    ?>
  </head>


  <body>

  
    <div >Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>

  </body>

</html>

Page 2-----------------------------

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />

    <?php
    wp_head();
    ?>



  </head>



  <body>

  
    <div >Hello</div>
    

  </body>

</html>

CSS------------------------

/*
Theme Name: Testing
Text Domain: Testing
Version: 1.0
Decription: 
Tags: 
Author: Jonny

*/


.change_colour {
    color: red;
}

.page-id-2 .change_colour {
    color: blue;
}

CodePudding user response：

You have to add <?php body_class(); ?> inside your opening body tag then you have to inspect the page and check the body tag for your .page-id-** class and then write CSS as per the class you get in the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
    <?php
    wp_head();
    ?>
  </head>
  <body <?php body_class(); ?> >
    <div >Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
  </body>
</html>