Adding Media Queries to HTML

Media Queries in HTML

Media queries can live inside a CSS file or be added to the <link> tag via the media attribute.

The media attribute loads the stylesheet but only applies it when the condition matches.

Example

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 1200px)">

/* Inside CSS file */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

HTML

Full Editor

Pro Tip

Use DevTools device emulation to test media queries without a physical device.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned