> For the complete documentation index, see [llms.txt](https://it2805.gitbook.io/curriculum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://it2805.gitbook.io/curriculum/responsive-css/media-types.md).

# 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;
    }
}
```