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:

body { background-color: orange; }

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

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.