Append style tag in head while shortcode runs

I also get this script tag shown in my shortcode output alongside my html that shortcode returns. How can I not have this script tag shown in my shortcode output.

Never use echo statement in a shortcode. A shortcode should only return something to display on front-end. As per WordPress Codex :

Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results. This is similar to the way filter functions should behave, in that they should not produce expected side effects from the call, since you cannot control when and where they are called from.

So modify your code as:

add_shortcode('foo', 'add_player');

function add_player($atts){

   $css = ".a{color:red;}";

    $o = '<script>
        var css = "'.$css'.";
        var div = document.createElement("div");
        div.innerHTML = "<style>" + css + "</style>";
        document.getElementsByTagName("head")[0].appendChild(div.childNodes[0]);
    </script>';

   return $o."<div class="a"></div>";

}

Or alternatively, you can use ob_start() and ob_get_clean() as follows:

add_shortcode('foo', 'add_player');
function add_player($atts){

   $css = ".a{color:red;}";
   ob_start();
   ?>
    <script>
        var css = "<?php echo $css; ?>";
        var div = document.createElement('div');
        div.innerHTML = "<style>" + css + '</style>';
        document.getElementsByTagName('head')[0].appendChild(div.childNodes[0]);
    </script>
   <?php

   $o = ob_get_clean();
   return $o. "<div class="a"></div>";

}

Visit WordPress Codex for more detail…
I hope this helps.