Media types

You have perhaps seen in a HTML document, when you include a CSS document, there is a media attribute in the link tag. This media attribute is the same as the media types you can use with media queries.

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

There are three media types you should know about in this course.

• all: Suitable for all devices.

• screen: Intended for computer screens.

• print: Intended for paged material and for documents viewed on screen in print preview mode.

If you want a style only to be applied on a screen (e.g. laptop, phone, tablet) you should use the `screen` media type. An example could be:

@media screen {
    body{
        background-color: \#FFFFFF;
    }
}

As most websites are viewed on a screen, it's perhaps not necessary to add the screen media type. But there are other types, i.e. print, and there might be some styles that would make the printed page harder to read, thus it's a good idea to use the screen type.

The use case for the `print` type would be when you're going to print a webpage, e.g. an article. Then you don't want the navbar to take up any space, and perhaps other features on the site as well. You can solve this by writing:

@media print {
    #nav-area {display: none;}
}

Media queries with the media type `all` will be applied for both screen and print.

@media all {
    body{
      font-size: 22px;
    }
}