Adding Media Style Sheets
Explore how to add media style sheets using the media attribute and the @media at-rule in CSS. Understand how media queries enable responsive design by targeting specific devices and media types, allowing you to apply different style rules for screens, print, and other output formats.
We'll cover the following...
Media-dependent style sheets use exactly the same syntax as any other CSS declarations. When attaching an external style sheet to your page, the media attribute of the <link> tag lets you specify the media type.
This sample shows how you can add three style sheets to your web page:
The first <link> tag loads a CSS file that contains all style rules that are suitable for every media type. The second and third <link> tags target specific media types, the second targets devices with screens, and the third targets printing devices.
Using the media attribute, you can attach the same style sheet file to different media types. This method cannot work with internal style sheets, because there is no media attribute to set up.
With the ...