Understanding media in media queries - CSS Tutorial

- [Instructor] Historically media was a CSS concept that was handled through an external style sheet. The code looked like this. You would link to the style sheet in the head of your document often after your regular style sheet for the styles on the screen. In this case, this was a print style sheet, but there were many other values that were possible. In earlier versions of CSS, these values were possibilities for the type of media. Notice that phone or tablet aren't options in this list. Back in those days, these were the options that we had for our various types of media where one might be viewing a website. Today that value for media has changed. The types of media have been condensed to just a few choices, screen print speech or all. All other values for media have been deprecated. This simplified list reflects changes to the types of devices we have for viewing webpages these days and the choices are vast. Instead of reflecting on the type of device, like a braille printer a TV or a projection on a screen, the W3C is now reframing media queries to reflect functionality and capability. For example, as you'll see later in the course, does a device have a hover capability or a landscape orientation? However, external style sheets are still valid for presenting separate styles, specifically for screen, print, speech or all types of media. You can also write your alternative media styles via media query, possibly in the same document that your other styles appear. So which is better and when should you use each one of these? As always it depends with an external style sheet, some people may find this harder to remember to maintain with ongoing changes to a website. However, the separate document may be clearer to site maintainers about what media controls which styles. Finally, since this is a separate document, it takes an extra call to the server to load it, which may impact overall performance of your site. For media queries, since they would be included in an existing style sheet, they're less likely to be overlooked. However, it also may be less clear where exactly those styles are applied, but the biggest difference and the one that's most powerful is that by specifying media in a media query, you can combine this test with others. For example, if someone wanted to print a document from a phone, you might want to condition your print styles based on widths, aspect ratio, orientation, media or all of these. We'll examine ways to combine multiple tests in a media query later in the course.