The media attribute shows a media query that must be matched for a style sheet to apply. Only <style> element is using this attribute.
Syntax:
<style media="media-query-list">
// Styling the element
</style>
Attribute Values: The media attribute accepts the values mentioned above and described below:
- media-query-list: This value holds a media query which lets the stylesheet to be applied on the element.
Below examples illustrate the use of media attribute.
Example 1:
<!DOCTYPE html>
< html >
< body >
< h1 style="margin-left: -8px;
font-size: 25px; color: green;">
GeeksforGeeks
</ h1 >
< svg viewBox = "0 10 1440 220"
< style >
rect {
fill: yellowgreen;
}
</ style >
< style media = "all and (min-width: 800px)" >
rect {
fill: green;
}
</ style >
< rect y = "20" width = "200" height = "200" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html>
< html >
< body >
< h1 style="margin-left: -8px;
color: green; font-size: 25px;">
GeeksforGeeks
</ h1 >
< svg viewBox = "0 2 1440 220"
< style >
circle {
fill: yellowgreen;
}
</ style >
< style media = "all and (min-width: 800px)" >
circle {
fill: green;
}
</ style >
< circle r = "100" cx = "100" cy = "100" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...