Wordpress plugin css on admin page

Question

update: My plugin css does not work in the admin area. the below works on my website for public viewing but not on my admin page that i am building.

original question: I'm trying to make the html text "Make this red", red! I have a plugin I've added to my Wordpress plugins folder. In the "bio-plugin" folder in a file called "plugin.php" i have this code:

function register_bio_style(){
    wp_register_style('bio-style',plugins_url('css/bio-style.css',__FILE__), false, '1.0.0', 'all');
}
add_action('init','register_bio_style');

function enqueue_bio_style(){
    wp_enqueue_style( 'bio-style' );
}
add_action('wp_enqueue_scripts', 'enqueue_bio_style');

then later i have this html working:

<div class='bio_btn'>Make this text red</div>

then i have put bio-style.css in a folder called css and that is in the same directory as plugin.php

the bio-style.css code is:

.bio_btn{
color: red;
background: black;
}

the sentence "Make this red" appears on the (admin) page but it is black.

Answer 1

I cant make a comment here to ask so im just going to make a semi blind answer here.

Is there another css file with ".bio_btn" in it?

anyways there's probably a child css over riding it.

this is bad method but it will probably work

CSS

.bio_btn{
color: red !important;
background: black;
}

Answer 2

Try this :

    <?php 
    /*
    Plugin Name: Bio
    Plugin URI: URL of site
    Description: Custom Plugin
    Version: 1.0.0
    Author: Rohil
    Author URI: URL of author
    */

        // Register the style like this for a plugin:
        wp_register_style( 'biocss', plugin_dir_url( __FILE__ ) . 'css/bio-style.css' );


        // For either a plugin or a theme, you can then enqueue the style:
        wp_enqueue_style( 'biocss' );



    ?>

    <div class='bio_btn'>Make this text red</div>

Answer 3

solved! For admin pages you must replace "init" with "admin_init" and "wp_enqueue_style" with "admin_enqueue_style" :)