The easiest way to do this is using wp_add_inline_style … here is the documentation.
A great example I found on a public Gist:
<?php
//Adding CSS inline style to an existing CSS stylesheet
function wpb_add_inline_css() {
//All the user input CSS settings as set in the plugin settings
$slicknav_custom_css = "
@media screen and (max-width: {$ng_slicknav_width}px) {
{$ng_slicknav_menu} {
display: none;
}
.slicknav_menu {
display: block;
background: {$ng_slicknav_background};
}
.slicknav_btn {
background-color:{$ng_slicknav_button};
float:{$ng_slicknav_button_position};
}
}";
//Add the above custom CSS via wp_add_inline_style
wp_add_inline_style( 'slicknavcss', $slicknav_custom_css ); //Pass the variable into the main style sheet ID
}
add_action( 'wp_enqueue_scripts', 'wpb_add_inline_css' ); //Enqueue the CSS style
And if your plugin doesn’t have an existing stylesheet, you can register a “dummy” one like this:
wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );