CSS Media Types

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS Media Types, media rules, @media, handheld device, braille, braile, aural, projection, tty, TV, pda, mobile phones, monitor, Cascading Style Sheets, Stylesheets"> <meta name="Description" content="Full list of CSS Media Types. Use CSS to apply a separate style depending on the media type that's displaying your web page."> <link rel="canonical" href="https://www.quackit.com/css/css_media_types.cfm"> <title>CSS Media Types</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS Media Types</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <p class="lead">Full list of CSS media types. CSS media types are used in media queries, which allow you to apply different styles depending on the output device.</p> <p>You can use the CSS <a href="/css/at-rules/css_media_at-rule.cfm"><code>@media</code></a> at-rule to create media queries that test for certain media types, then apply styles accordingly. </p> <p>For example, you can specify one set of styles for when your web page is viewed on a computer screen and another for when it's printed out.</p> <h2>List of CSS Media Types</h2> <p>Below is a list of media types supported in <a href="https://drafts.csswg.org/mediaqueries-4/#media-types">CSS Media Queries Level 4</a>.</p> <dl> <dt><dfn>all</dfn></dt> <dd>Matches all devices.</dd> <dt><dfn>print</dfn></dt> <dd>Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in "Print Preview".</dd> <dt><dfn>screen</dfn></dt> <dd>Matches all devices that aren't matched by <code>print</code> or <code>speech</code>.</dd> <dt><dfn>speech</dfn></dt> <dd>Matches screenreaders and other devices that read out the content of a page.</dd> </dl> <h3>Deprecated Media Types</h3> <p>In addition to the above media types, CSS2 supported the following media types, which are being deprecated in CSS Media Queries Level 4. </p> <dl> <dt><dfn>tty</dfn></dt> <dd>Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).</dd> <dt><dfn>tv</dfn></dt> <dd> Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</dd> <dt><dfn>projection</dfn></dt> <dd>Intended for projected presentations, for example projectors.</dd> <dt><dfn>handheld</dfn></dt> <dd>Intended for handheld devices (typically small screen, limited bandwidth).</dd> <dt><dfn>braille</dfn></dt> <dd>Intended for braille tactile feedback devices.</dd> <dt><dfn>embossed</dfn></dt> <dd>Intended for paged braille printers.</dd> <dt><dfn>aural</dfn></dt> <dd>Intended for the aural rendering of a document. This was introduced in CSS2 but deprecated in CSS2.1 (in favor of the "speech" media type).</dd> </dl> <p>Media types can be combined with media features in order to provide more granularity in your media queries.</p> <aside class="info"> <h4>Deprecation of all Media Types?</h4> <p>CSS Media Queries Level 4 expects that all media types will be depreciated in time:</p> <blockquote> It is expected that all of the media types will also be deprecated in time, as appropriate media features are defined which capture their important differences. </blockquote> </aside> <h2>How to add a Media Type</h2> <p>Here are three methods for creating separate styles depending on the media type:</p> <ul> <li><p>Use the CSS <a href="/css/at-rules/css_media_at-rule.cfm"><code>@media</code></a> at-rule. For example:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false">@media print {
 p {
 font-family: georgia, times, serif;
 }
}</textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> </li> <li><p>Use the <code>media</code> attribute when using the <a href="/html/tags/html_link_tag.cfm"><code class="tag">link</code></a> tag to link to an external style sheet. For example:</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><link rel="stylesheet" media="screen" href="/css/screen_version.css"></textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> </li> <li> <p>Add the media type when using the <a href="/css/at-rules/css_import_at-rule.cfm"><code>@import</code></a> at-rule. For example:</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false">@import "screenstyles.css" screen;</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> </li> </ul> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/css/css_media_features.cfm" title="List of media features defined in CSS.">CSS Media Features</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/css/tutorial/">CSS Tutorial</a></h3> <ul> <li><a href="/css/tutorial/css_introduction.cfm">Introduction to CSS</a></li> <li><a href="/css/tutorial/css_syntax.cfm">CSS Syntax - How to Code CSS</a></li> <li><a href="/css/tutorial/implementing_css.cfm">How to add CSS to a Website</a></li> <li><a href="/css/tutorial/css_class.cfm">CSS Class Selectors</a></li> <li><a href="/css/tutorial/css_id.cfm">CSS ID Selectors</a></li> <li><a href="/css/tutorial/css_font.cfm">CSS Font Properties</a></li> <li><a href="/css/tutorial/css_text.cfm">CSS Text Properties</a></li> <li><a href="/css/tutorial/css_height_width.cfm">CSS Height & Width Properties</a></li> <li><a href="/css/tutorial/css_background_code.cfm">CSS Background Code</a></li> <li><a href="/css/tutorial/css_border.cfm">CSS Border Properties</a></li> <li><a href="/css/tutorial/css_margin.cfm">CSS Margin Properties</a></li> <li><a href="/css/tutorial/css_padding.cfm">CSS Padding Properties</a></li> <li><a href="/css/tutorial/css_lists.cfm">How to Style Lists</a></li> <li><a href="/css/tutorial/css_positioning.cfm">CSS Positioning</a></li> <li><a href="/css/tutorial/css_float.cfm">CSS Float</a></li> <li><a href="/css/tutorial/css_layers.cfm">CSS Layers</a></li> <li><a href="/css/tutorial/css_flexbox_and_grid.cfm">CSS Flexbox & Grid</a></li> <li><a href="/css/tutorial/css_summary.cfm">CSS Summary</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

CSS Media Types