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.
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:
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 queries with the media type `all` will be applied for both screen and print.
Last updated
Was this helpful?