Does media Attribute Work With the HTML style Tag?

Similar to the <link> element, the HTML <style> tag does support the media attribute. If it's present, then the styles in the respective code block are executed if a specified media query matches.

If the media attribute is not specified, then it falls back to the default value of "all".

For example, as per the following code, the background-color will be orange by default, and pink if the device is "screen" and the document max-width is 425px:

<style>
body { background-color: orange; }
</style>

<style media="screen and (max-width: 425px)">
body { background-color: pink; }
</style>