It depends on exactly what you mean by “with a style in the page”. If you want to use style rules already applied to the page, include the proper attributes in your shortcode output to match the existing style selectors. For example, if the page’s CSS already includes this rule: .my-red {color: red;}
, add the class “my-red” to your shortcode’s HTML element, like so:
<h1 class="my-red">Shortcode Title</h1>
If you mean instead to have the shortcode apply new style rules not available elsewhere, you could begin the shortcode output with an inline <style> block that contains your new rules. Rules added like this will be applied to the entire page, not just your shortcode. To limit styles to your shortcode, you can use element styles, for example <h1 style="color: red;">Shortcode Title</h1>
, or use distinct selectors that could not be applied elsewhere.
Inline and element styles like I just described are frowned upon in good webpage design practices. We should keep style and content separate so page appearance can be altered without touching content at all. It’s better to have the style rules enqueued separately so other modules and devs are able to override your plugin’s default styles if need be without needing to directly hack your plugin code.