How to Use CSS Media Queries

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

According to the Mozilla Developer website,

“A media query consists of an optional media type and zero or more expressions that limit the style sheets’ scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.”

In the paragraph above, there are a few phrases that you need to understand to understand media queries.

Media Type

The phrase, “media type” refers to the type of media on which the website is going to be rendered. That could be for example, “print”, “screen”, etc. As an example, in an HTML document you could write,

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

What this means is that the style sheet, “styles.css” is going to be rendered along with this HTML page if the HTML page is rendered on a device like a desktop computer that has a “screen”. If someone sends the document to a printer to have a hard copy of your page, then the style sheet is going to be simply ignored.

As another example, let’s take a look at the following example:

body {
background-color: white;
color: black;
font-family: Verdana, Helvetica, serif;
}



@media print {

body {
background-color: white; 
color: black; 
font-family: Georgia, "Times New Roman", sans-serif;
}
 
}   /* End of @media */

You could think of this as a part of your main style sheet related to a project. This style sheet has been linked to the head of all your HTML documents and you have used the media type, “screen” in the “link” tag all across the website. Inside this style sheet, you have used an “@media” rule and the media type has been defined as “print”. You have a pair of curly braces and between the two, you have some CSS code. The whole code between the two curly braces is going to be sent to the device only if the document is sent to a printer otherwise the rest of the style sheet will be sent to the user agent (screen).

Media Features

The phrase, “media features” refers to width, height or to the fact that whether the screen is a color screen or a black and white one. For example, width would be the width of the viewport of the browser. As an example, let’s look at the following:

<link href=”styles.css” rel=”stylesheet” media=”(max-width: 800px)”>

This is a link tag in the head of one of your HTML documents. What this does is that the style sheet,”styles.css” is going to be rendered along with the HTML document only if the viewport width is maximum 800px. As soon as the viewport width is higher than 800px, the style sheet is going to be out of service. It might be replaced with another one if you wish so.

As another example, let’s look at the following piece of code,

div#main {
width: 70%; 
float: left;
}
div#sidebar {
width: 30%; 
float: left; 
}


@media (max-width: 800px) {

div#main {
width: 100%; 
float: none; 
}
div#sidebar {
width: 100%; 
float: none;
}
 
}   /* End of @media */

You could think of this as a part of the main style sheet related to your website. The style sheet has been linked to the head of all HTML documents in the website and the media type, “screen” has been defined in the “link” tag.

Taking a look at the code, you can recognize that the website has two columns in the HTML code, “div#main” and “div#sidebar”, being the main column and the sidebar. We have not included the HTML code here. When the viewport width is maximum 800px, the website becomes single-column and both the divs are going to be place on top of one another. If the viewport width is higher than 800px, then we have limited the width of both the divs and floated them to left, creating a multi-column website.

Combining Media Type and Media Features

You can of course combine the cases above. Let’s take a look at the following example:

<link href="styles.css" media="screen and (max-width: 720px)" rel="stylesheet">

What this does is that the style sheet, “styles.css” will be rendered along with the HTML document if the media type is “screen” and the viewport size is not higher than 720px. The logical operator “and” here is very important, in that, the style sheet will not be implemented unless “both” the conditions are met.

You can essentially do the same thing in your CSS style sheets as well, as we saw in the examples above. You can use logical operators like “and” combine all the conditions that you might have.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

CSS Media Queries – Concept

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

Media queries have recently been added to CSS specifications and give you a lot of control over your pages and how they are rendered on different devices.

The main concept is that when you have a standard website, you have some HTML pages and the content inside them. The pages are rendered on some device by some browser and the visitor sees your content.

Now the problem here is that every device has some sort of screen width  and there’s no way no know what the screen width of your visitor is. If the visitor renders your page on a big TV, then the device screen is probably going to be very large and wide, probably over 3000px. If, on the other hand, the visitor is looking at your page on an iPhone, then the screen width is not going to be higher than 1000px, of course depending on the device orientation.

You have a few main categories of content that is mainly delivered by a website. It’s either text, graphic images and video. Depending on the screen real estate that the visitor has, you may want to make your content be presented in different ways.

For example if you have a background image that’s used as the main background for your website, you want to use a large image if the website is rendered on a large TV. On the other hand, a smaller version of the same image might be more than enough if the user is using their iPhone to look at your website.

Also you might want to make some changes to the width of the main text column on your website depending on the screen width. You basically don’t want the text to start from the left edge of the screen going all the way to the right edge if your website is being rendered on a huge TV. On an iPhone, that’d be okay.

For another example, if your website has two columns beside each other, say one main column and one sidebar, you may want to have both the columns beside each other if the website is being rendered on a wide TV or monitor. On an iPhone for example, you might want to show the visitor the more important content, namely the main column, first and then send the sidebar below the main content on the page. The user can scroll down to get to the sidebar.

So to be able to have control over all such typical situations, you have a tool called media queries. Here’s how you can use media queries.

You have a main column of text on your website. It’s easy to read text if you don’t make the column so wide so that the readers’ eyes can easily find the next line and keep reading. Basically long lines are not easy to read. The normal easy width would be around 800px. So using media queries, you tell the browser to take up the whole browser width if the screen width is for instance around 1000px. On the other hand, you tell the browser to take up something around 80% of the browser width if the screen width is maximum 1200px. If you have to support screens with higher widths, then you tell the browser for example that if the screen width is between 1200px and 2000px, then make the column width 50% for instance and so on and so forth.

This always of course depends on the type of website and application that you’re developing. For example, a normal website with mainly text content isn’t usually rendered on a large TV so you don’t have to worry about that. On the other hand, Youtube is the kind of website that nowadays is most of the time used on large TVs. Most modern TVs today are connected to the Internet and have a standard web browser.

In another post, we’ll talk about the general form of media queries and how you can write them in your HTML and CSS code.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address: