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>
Hope you found this post useful. It was published . Please show your love and support by sharing this post.