When activating your own plugin, the warning headers already sent?

Question

WordPress

I am learning to write plugins. When activated on WordPress, a message pops up

The plugin produced 1444 characters of unexpected output when activated. If you notice a "headers already sent" error, problems with RSS feeds, or other problems, try deactivating or uninstalling this plugin.

Here is the plugin code:

<?php
/*
Plugin Name: colors-woobler
Plugin URI: http://www.woobler.ru
Description: Оформление текста
Version: 0.1
License: GPLv2
Author: Татьяна 
Author URI: http://www.woobler.ru

*/

function podpis() {
return '<div class="podpis"><p>С уважением</p><p>Команда woobler.ru</p></div>';
}

add_shortcode('podpis', 'podpis');


function green1() {
return '<div id="green">';
}
add_shortcode('green1', 'green1');

function green0() {
return '</div>';
}
add_shortcode('green0', 'green0');

function blue1() {
return '<div id="blue">';
}
add_shortcode('blue1', 'blue1');

function blue0() {
return '</div>';
}
add_shortcode('blue0', 'blue0');

function yellow1() {
return '<div id="yellow">';
}
add_shortcode('yellow1', 'yellow1');

function yellow0() {
return '</div>';
}
add_shortcode('yellow0', 'yellow0');

function red1() {
return '<div id="red">';
}
add_shortcode('red1', 'red1');

function red0() {
return '</div>';
}
add_shortcode('red0', 'red0');

function magenta1() {
return '<div id="magenta">';
}
add_shortcode('magenta1', 'magenta1');

function magenta0() {
return '</div>';
}
add_shortcode('magenta0', 'magenta0');


function silver1() {
return '<div id="silver">';
}
add_shortcode('silver1', 'silver1');

function silver0() {
return '</div>';
}
add_shortcode('silver0', 'silver0');

?>

And there styles (all in one file)

<style>

.podpis {
        text-align: right;
    padding-right: 20px;
    border-radius: 11px;
font-family: cursive;
}


#blue
{
   background: linear-gradient(0deg, #E8FFFE, #E8FFEB);
    border-top: 1px solid #B3DCB1;
    border-bottom: 1px solid #B7D5D8;
    margin-top: 15px;
    padding: 10px;
    margin-bottom: 15px;
}

#yellow
{
    background: linear-gradient(0deg, #FFFECD, #FFFDE2);
    border-top: 1px solid #FBE98B;
    border-bottom: 1px solid #FFDA72;
    margin-top: 15px;
    padding: 10px;
    margin-bottom: 15px;
}




#red
{
    background: linear-gradient(0deg, rgba(230, 0, 29, 0.2), rgba(253, 0, 0, 0.09));
    border-top: 1px solid rgba(255, 27, 2, 0.33);
    border-bottom: 1px solid rgba(255, 23, 16, 0.64);
    margin-top: 15px;
    padding: 10px;
    margin-bottom: 15px;
}

#magenta
{
    background: linear-gradient(0deg, rgba(209, 193, 255, 0.77), rgba(184, 69, 255, 0.16));
    border-top: 1px solid rgba(209, 139, 251, 0.89);
    border-bottom: 1px solid rgba(192, 92, 255, 0.84);
    margin-top: 15px;
    padding: 10px;
    margin-bottom: 15px;
}

#silver
{
    background: linear-gradient(0deg, rgba(224, 224, 224, 0.77), rgba(218, 218, 218, 0.16));
    border-top: 1px solid rgba(142, 142, 142, 0.36);
    border-bottom: 1px solid rgba(136, 136, 136, 0.6);
    margin-top: 15px;
    padding: 10px;
    margin-bottom: 15px;
}

</style>

Tell me, what is the error, and where should I look to figure it out?
Everything works functionally.

Answer 1

The encoding is not UTF-8 without BOM , but it should be the UTF-8 без BOMencoding for your plugin files. Try to fix the encoding to the correct one.
And if the screen is white, then there are still errors.
Open wp-config and the line define('WP_DEBUG', false);and replace it with: define('WP_DEBUG', true);
Then again look in the admin panel and you will see the error text