HTML media Attribute

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 3 Examples
Links & CSS
HTML media attribute tutorial — conditional stylesheets for screen print and responsive breakpoints
Overview

Introduction

The media attribute tells the browser when a stylesheet or other linked resource should apply. You set it on <link rel="stylesheet">, <style>, and <source> (inside <picture>). The value is a CSS media query list—such as screen, print, or (min-width: 768px). If the condition matches the current device or context, the resource is used; otherwise it is skipped. This lets you load print-only CSS, target specific breakpoints, or pick responsive image sources without affecting every viewport.

What You’ll Learn

01

Conditional CSS

When styles apply.

02

link & style

Primary elements.

03

screen & print

Common media types.

04

Media queries

e.g. min-width.

05

source in picture

Responsive images.

06

.media in JS

Update at runtime.

Fundamentals

Purpose of media Attribute

The primary purpose of media is to tie a resource to a specific rendering context. A screen stylesheet keeps your normal layout; a print stylesheet can hide navigation and simplify colors for paper. A link with media="(min-width: 768px)" loads desktop CSS only when the viewport is wide enough, which can reduce work on small screens.

On <picture>, the same attribute on <source> picks which image file the browser should use at each breakpoint. The idea is one HTML document that adapts its presentation or assets to the user’s device, print job, or viewport size.

💡
Not the same as @media in CSS

media on a <link> or <style> gate-keeps an entire stylesheet. @media rules inside a CSS file switch individual rule blocks. Modern sites often use one CSS file with internal @media, but separate print sheets and conditional <link media> remain useful.

Foundation

📝 Syntax

Add media with a valid media query list on link, style, or source:

media.html
<head>

  <link rel="stylesheet" href="screen.css" media="screen">

  <link rel="stylesheet" href="print.css" media="print">

  <link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">



  <style media="(max-width: 767px)">

    nav { display: none; }

  </style>

</head>



<picture>

  <source srcset="hero-wide.jpg" media="(min-width: 800px)">

  <img src="hero.jpg" alt="Hero">

</picture>

Syntax Rules

  • Value is a comma-separated media query list (same syntax as CSS @media).
  • Default on <link> and <style> is all if omitted.
  • Valid on <link rel="stylesheet">, <style>, and <source> in <picture>.
  • Quotes around the value are recommended when it contains parentheses or spaces.
  • JavaScript IDL property: linkElement.media = "(min-width: 768px)".
  • Do not confuse with the type attribute (MIME type) or rel on <link>.
Reference

💎 Values

The media attribute accepts CSS media types, keywords, and full media queries:

  • all — Default; applies in all contexts (screen, print, etc.).
  • screen — Styles for screens (monitors, phones, tablets).
  • print — Styles used when printing or in print preview.
  • speech — Intended for speech synthesizers; rarely used for author CSS in practice.
  • (min-width: 768px) — Applies when viewport is at least 768px wide.
  • (max-width: 599px) — Applies on narrow viewports (mobile-first breakpoints).
  • screen and (orientation: landscape) — Combines type and feature queries.
media-js.html
document.getElementById("printSheet").media = "print";

document.getElementById("responsiveLink").media = "(min-width: 1024px)";
Cheat Sheet

⚡ Quick Reference

Use caseMarkupNotes
Screen layout<link media="screen" …>Normal browsing
Print layout<link media="print" …>Hide nav, simplify colors
Desktop-only CSSmedia="(min-width: 768px)"Conditional load
Embedded breakpoint<style media="(max-width: 599px)">Inline conditional block
Responsive image<source media="(min-width: 800px)" …>Inside <picture>
JS updatelink.media = "all"Runtime change
Scope

Applicable Elements

ElementSupported?Notes
<link rel="stylesheet">YesMost common use — external CSS
<style>YesConditional embedded CSS
<source> in <picture>YesPick image by viewport
<link rel="preload"> (as appropriate)YesPreload only when media matches
<input>, <img>, <a>NoNot a valid attribute on these
Compare

media attribute vs @media in CSS

ApproachWhere it livesWhat it controls
media on <link>HTML <head>Whether entire external stylesheet loads/applies
media on <style>HTML documentWhether embedded stylesheet block applies
@media in CSSInside .css fileIndividual rule sets within one file
media on <source><picture>Which image candidate to use
Hands-On

Examples Gallery

Screen vs print styles, responsive breakpoint blocks, and changing link.media with JavaScript.

👀 Live Preview

Resize the window to see breakpoint-based styling (simulates media on <style>):

Mobile styles (narrow viewport)

Current width: —px

Example — Screen and Print Stylesheets

Link separate CSS files for on-screen viewing and printing:

screen-print.html
<head>

  <link rel="stylesheet" href="styles.css" media="screen">

  <link rel="stylesheet" href="print.css" media="print">

</head>
Try It Yourself

How It Works

The browser evaluates each link’s media value. Only matching stylesheets participate in layout for that context. Print styles do not affect normal screen rendering.

Example — Responsive Media Query on Style

Apply CSS only when the viewport matches a breakpoint:

responsive-media.html
<style media="(max-width: 599px)">

  .sidebar { display: none; }

</style>



<style media="(min-width: 600px)">

  .sidebar { display: block; width: 240px; }

</style>
Try It Yourself

How It Works

Media queries use the same syntax as CSS @media. Many teams prefer one file with internal @media rules, but splitting blocks or files by media can keep concerns separated.

Dynamic Values with JavaScript

Change when a stylesheet applies at runtime:

dynamic-media.html
<link id="dynamicSheet" rel="stylesheet" href="theme.css" media="screen">



<script>

  document.getElementById("dynamicSheet").media = "(min-width: 768px)";

</script>
Try It Yourself

How It Works

Assign a new media query string to link.media or style.media. The browser re-evaluates whether the sheet applies. The old reference showed changing to speech for screen readers—that is not a reliable accessibility strategy.

A11y

♿ Accessibility

  • Do not rely on media="speech" — Screen readers are not styled through author CSS the way visual browsers are. Use semantic HTML, headings, labels, and ARIA where needed.
  • Print styles help everyone — A clear print stylesheet improves readability on paper and in PDF exports.
  • Responsive layout must stay usable — Hiding content with media queries should not remove essential information from mobile users unless an equivalent path exists.
  • Test at multiple viewport sizes — Conditional CSS can accidentally hide focus indicators or skip link styles on small screens.
  • Prefer user preferences — CSS features like prefers-reduced-motion belong in CSS; combine with thoughtful media usage for layout breakpoints.

🧠 How media Works

1

Author sets media

Query on link/style.

Markup
2

Browser evaluates

Viewport, print, etc.

Match
3

Resource applies

CSS or image used.

Render
=

Context-aware page

Right styles per device.

Compatibility

Browser Support

The media attribute on <link>, <style>, and <source> is fully supported in all modern browsers. Media query syntax follows CSS Media Queries Level 3+ support in each engine.

✓ HTML5 · Fully supported

Universal conditional resources

Chrome, Firefox, Safari, and Edge honor media on stylesheets and picture sources.

99% Browser support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
media on link, style, and source 99% supported

Bottom line: Safe for print sheets, responsive links, and picture sources in production.

Pro Tips

💡 Best Practices

✅ Do

  • Use media="print" for dedicated print stylesheets
  • Quote values that contain parentheses or spaces
  • Combine with <picture> for responsive images
  • Test print preview and multiple viewport widths
  • Prefer one CSS file with @media when it keeps maintenance simpler

❌ Don’t

  • Assume media="speech" improves screen reader UX
  • Hide critical content on mobile without an alternative
  • Confuse media with type on <link>
  • Load dozens of separate breakpoint files if one bundled CSS is cleaner
  • Forget that omitted media defaults to all
Wrap Up

Conclusion

The media attribute connects HTML resources to the user’s context—screen, print, viewport width, and more. On stylesheets it controls when CSS applies; on <source> it helps pick the right image. Used well, it keeps pages fast, printable, and responsive.

Start with clear screen and print splits, learn media query syntax, and know when a single CSS file with internal @media is enough. Update link.media in JavaScript only when you truly need runtime control.

View Examples Gallery Try screen vs print
Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about media

Bookmark these before wiring conditional CSS.

5
Core concepts
🔗 01

When, not what

Context gate for CSS.

Meaning
📄 02

link & style

Main elements.

Scope
🖨️ 03

screen & print

Classic split.

Types
📈 04

Media queries

Same as @media.

Syntax
⚙️ 05

.media JS

Runtime updates.

Dynamic
🎯 You can target CSS by device and context
Review Quick Reference →

❓ Frequently Asked Questions

It specifies media conditions under which a linked stylesheet, <style> block, or <source> in <picture> should apply. Values include screen, print, and queries like (min-width: 768px).
<link rel="stylesheet">, <style>, and <source> inside <picture>. Not valid on arbitrary elements like <div> or <input>.
Same query syntax, different scope. The HTML media attribute controls an entire stylesheet. @media inside CSS toggles rule sets within one file.
Use <link rel="stylesheet" href="print.css" media="print"> or <style media="print">…</style>. Rules apply in print preview and when printing.
Set linkElement.media = "(min-width: 768px)" on an HTMLLinkElement, or styleElement.media on HTMLStyleElement.
Not in a dependable way. Screen readers do not use author CSS like visual browsers. Use semantic markup and ARIA for accessibility, not speech-specific stylesheets.

Target CSS with the media attribute

Practice screen vs print styles, responsive queries, and dynamic link.media in the Try It editor.

Try screen vs print →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML maxlength Attribute HTML method Attribute