{"id":3988,"date":"2017-01-20T05:26:29","date_gmt":"2017-01-20T10:26:29","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=3988"},"modified":"2021-12-08T13:41:28","modified_gmt":"2021-12-08T18:41:28","slug":"css-stylesheet-media-types-guides","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/","title":{"rendered":"Your Simplified Guide to CSS Stylesheet Media Types"},"content":{"rendered":"\n<p>With the advent of more and more <a href=\"\/\/local.brightwhiz\/tag\/iot\/\">IoT<\/a> (Internet of Things) devices becoming commonplace in our lives, it is ever more important that developers of web applications and websites factor this into their designs. That is where <a href=\"\/\/local.brightwhiz\/tag\/css\/\">CSS <\/a>stylesheet media types come into play.<\/p>\n\n\n\n<p>In some isolated cases it may just make sense to develop multiple versions of your web app to target these numerous devices. That we know is not very practical in the long run. We just can no longer design a user interface for every individual device or brand in different form factors. It is already a task to keep up with the growing number of <a href=\"\/\/local.brightwhiz\/tag\/mobile\/\">mobile <\/a>devices let alone your Internet-connected bathing soap dispenser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">So how do CSS Stylesheet Media Types Work?<\/h2>\n\n\n\n<p>These stylesheet media types are designed to load different external CSS stylesheets based on the target device type. What this means without changing your HTML or back-end server code, you can load and display parts of <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML <\/a>when viewing on a Desktop device and others when viewing on a mobile device. Then if you decide to print out the material you can get a different print-friendly layout altogether.<\/p>\n\n\n\n<p>Here is how you can use your media queries on your HTML page. You can simply insert the code below in between the tags on the HTML page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;screen.css&quot; media=&quot;screen&quot;&gt;\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;print.css&quot; media=&quot;print&quot;&gt;<\/code><\/pre>\n\n\n\n<p>The &#8220;media&#8221; attribute can then have different values as desired from the list below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Possible CSS Stylesheet Media Types Values<\/h2>\n\n\n\n<ul><li><strong>all<\/strong>: This can be used for all media type devices and is the default media type for HTML pages<\/li><li><strong>aural<\/strong>: This is used for speech and sound synthesizers<\/li><li><strong>braille<\/strong>: This is used for braille and tactile feedback devices<\/li><li><strong>embossed<\/strong>: This can be used for paged braille printers<\/li><li><strong>handheld<\/strong>: This can be used for mobile, small or generally handheld devices<\/li><li><strong>print<\/strong>: Used to style documents sent to the printers<\/li><li><strong>projection<\/strong>: Used to style slides and more so PowerPoint style projected presentations<\/li><li><strong>screen<\/strong>: This is used for computer screens<\/li><li><strong>tty<\/strong>: Used for teletypes and terminals or media using a fixed-pitch character grid<\/li><li><strong>tv<\/strong>: Used for television devices<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>With the advent of more and more IoT (Internet of Things) devices becoming commonplace in our lives, it is ever more important that developers of web applications and websites factor&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3990,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,17],"tags":[170,220,322,382,433,543,591,637,638,643],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Your Ultimate Guide to CSS Stylesheet Media Types Simplified<\/title>\n<meta name=\"description\" content=\"This is the simplified guide to CSS stylesheet media types to customize the look of your website on multiple IoT, mobile, embedded and Desktop devices\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Your Ultimate Guide to CSS Stylesheet Media Types Simplified\" \/>\n<meta property=\"og:description\" content=\"This is the simplified guide to CSS stylesheet media types to customize the look of your website on multiple IoT, mobile, embedded and Desktop devices\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-20T10:26:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T18:41:28+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"Your Simplified Guide to CSS Stylesheet Media Types\",\"datePublished\":\"2017-01-20T10:26:29+00:00\",\"dateModified\":\"2021-12-08T18:41:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\"},\"wordCount\":355,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg\",\"keywords\":[\"CSS\",\"Embedded\",\"IoT\",\"Mobile\",\"Optimization\",\"Software Design\",\"Tools\",\"Web Design\",\"Web Development\",\"Websites\"],\"articleSection\":[\"Articles\",\"Guides\",\"Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\",\"url\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\",\"name\":\"Your Ultimate Guide to CSS Stylesheet Media Types Simplified\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg\",\"datePublished\":\"2017-01-20T10:26:29+00:00\",\"dateModified\":\"2021-12-08T18:41:28+00:00\",\"description\":\"This is the simplified guide to CSS stylesheet media types to customize the look of your website on multiple IoT, mobile, embedded and Desktop devices\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg\",\"width\":1200,\"height\":630,\"caption\":\"CSS Stylesheet Media Types\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Your Simplified Guide to CSS Stylesheet Media Types\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Your Ultimate Guide to CSS Stylesheet Media Types Simplified","description":"This is the simplified guide to CSS stylesheet media types to customize the look of your website on multiple IoT, mobile, embedded and Desktop devices","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/","og_locale":"en_US","og_type":"article","og_title":"Your Ultimate Guide to CSS Stylesheet Media Types Simplified","og_description":"This is the simplified guide to CSS stylesheet media types to customize the look of your website on multiple IoT, mobile, embedded and Desktop devices","og_url":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-01-20T10:26:29+00:00","article_modified_time":"2021-12-08T18:41:28+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"Your Simplified Guide to CSS Stylesheet Media Types","datePublished":"2017-01-20T10:26:29+00:00","dateModified":"2021-12-08T18:41:28+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/"},"wordCount":355,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg","keywords":["CSS","Embedded","IoT","Mobile","Optimization","Software Design","Tools","Web Design","Web Development","Websites"],"articleSection":["Articles","Guides","Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/","url":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/","name":"Your Ultimate Guide to CSS Stylesheet Media Types Simplified","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg","datePublished":"2017-01-20T10:26:29+00:00","dateModified":"2021-12-08T18:41:28+00:00","description":"This is the simplified guide to CSS stylesheet media types to customize the look of your website on multiple IoT, mobile, embedded and Desktop devices","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/01\/CSS-Stylesheet-Media-Types.jpg","width":1200,"height":630,"caption":"CSS Stylesheet Media Types"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/css-stylesheet-media-types-guides\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"Your Simplified Guide to CSS Stylesheet Media Types"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/twitter.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/3988"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=3988"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/3988\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/3990"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=3988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=3988"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=3988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}