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:

CSS Box Model Properties – Block-level Elements

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.

If you want to control any aspect of the box model, you need to use the relevant CSS properties. For example, you want to add some border around the content of the box. You write the following line of code in your CSS:

p {
border: 1px solid black;
}

Or you want to add some padding to the top of the box, you write this line of code in your CSS:

p {
padding-top: 10px;
}

You basically have the following keywords in order to control the different aspects of the box model of any box in CSS:

  • width
  • height
  • padding
  • border
  • margin

“width” specifies the width of the content area in case of box-sizing: content-box. In the case of box-sizing: border-box; it controls the width of content area + padding-right + padding-left + border-right + border-left.

“height” specifies the height of the content area in case of box-sizing: content-box. In the case of box-sizing: border-box; it controls the height of content area + padding-top + padding-bottom + border-top + border-bottom.

“padding” specifies the width of the padding around the content area. You can have padding-top, padding-right, padding-bottom and padding-left.

In the case of “border” things get a little complicated since you can have,

  • padding-width
  • padding-style
  • padding-color

Each of these can, in turn, be defined for each of the sides. So you can, for instance, have

  • padding-right-width
  • padding-left-style
  • padding-bottom-color
  • etc.

“margin” defines the width of the margin for the four sides of the box. So you can have

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Please note that if you simply write “margin” it’s going to set the margin for the four sides of the box simultaneously. This applies to “padding” and “border” as well. For example, if you write,

p { margin: 10px; }

it would have the same meaning and effect as,

p {
margin-top: 10px;
margin-right; 10px;
margin-bottom: 10px;
margin-left: 10px;
}

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 Box Model – Introduction

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.

In order to understand the CSS box model, you need to understand what a box is.

If you write the following line of code in your text editor, save it as for example example.html and then open the document in a web browser,

<p>This is a paragraph.</p>

In the browser view port, what you’ll see is actually the same sentence without the “p” tags. If you inspect the website with some tool, for example Firebug, you’ll see a whole box around the sentence in the view port. The box will have the following parts:

  • content – where the sentence comes
  • padding – some padding around the content
  • border – a border line around the padding (by default the border is not there if you don’t specify one.)
  • margin – some margin around the border and outside the box

This is a simple box that you can put anything inside it. It kind of resembles actual boxes that we have in the world. Of course not exactly, you have some space in the box which is the content area. around the content area you can have some padding. We usually don’t do this in the real world in case of real boxes though. Then comes the walls of the box which you could think of as the “border”. The “margin” is actually outside the box. It could be thought of as the horizontal space between two boxes on the floor.

There are three types of boxes that you’re going to be dealing with the most,

  • Block-level boxes
  • Inline boxes
  • Inline-block boxes

We’ll familiarize ourselves with each type in the upcoming lessons.

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 “display” Property

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.

The CSS display property is most often used for building CSS layouts or in cases where you are trying to position HTML elements. It’s so because it changes the way an element is represented on the view port, whether it’s going to be rendered as a block-level box, inline box, inline-block box, etc.

For example the HTML “li” tag creates a block-level box in the view port. So when you have a “ul” and some li’s inside it, you’ll have some li’s on top of one another in the view port, each taking up the whole view port width, the next one starting from the next line. That’s basically how block-level boxes behave. This is not helpful if you’re building a horizontal navigation menu with a “ul”. You’d want the li’s to be placed beside each other. You know that inline boxes do exactly the same thing. In the viewport, they take up exactly as much space as their content needs. And that is exactly what you’d need in this situation. So you simply write in your CSS,

ul li { display: inline; }

And the problem is taken care of.

The “display” CSS property takes the following values. Please note that I have omitted the values that are not so often used or not relevant to our discussion here:

  • inline
  • block
  • inline-block

There’s one more interesting value for the “display” property which is “none”. You use this value mostly when you want to get the browser not show the element. In some cases and techniques it’s very useful.

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:

Inline Elements and Boxes

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.

To know about the difference between “elements” and “boxes”, please go to Block-level Elements and Boxes. If you’ve landed on this page from within the course page, then you must have already read that part.

Here’s the important characteristics of inline elements that you should understand:

  • As opposed to block-level elements like p, inline elements generate the kind of boxes that get only as wide as the content inside them.
  • As opposed to block-level boxes, inline boxes don’t have an integrated line breaking mechanism. That means, they do not start on a new line, nor do them break their own line.
  • Inline elements can contain text and other inline elements but no block-level elements.

Here’s a list of a few famous inline elements:

  • a
  • b
  • big
  • i
  • small
  • tt
  • abbr
  • acronym
  • cite
  • code
  • dfn
  • em
  • kbd
  • strong
  • samp
  • time
  • var
  • a
  • bdo
  • br
  • img
  • map
  • object
  • q
  • script
  • span
  • sub
  • sup
  • button
  • input
  • label
  • select
  • textarea

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 Box Model – border-box versus content-box

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.

The CSS property box-sizing can have four different values:

  • content-box
  • border-box
  • initial
  • inherit

initial and inherit apply to almost all (or I think all) CSS properties and are not important here, so we don’t talk about them.

content-box

When you set the value of the box-sizing property of an element to content-box, the width property defined for that element determines the width of the content area only, not including padding, border or margin.

For example, let say you had the following code,

div#id1 {
box-sizing: content-box; 
width: 150px; 
padding: 20px; 
border: 1px solid black; 
margin: 20px; 
}

This situation for div#1 would mean that the total width of div#id1 is the sum of,

  • 150px content area width
  • padding-left width of 20px
  • padding-right width of 20px
  • border-left width of 1px
  • border-right width of 1px
  • margin-left width of 20px
  • margin-right width of 20px

That would in total come to,

150 + 20 + 20 + 1 + 1 + 20 + 20 = 232px

So you can easily calculate how much viewport width you need for div#id1. You can calculate it.

Note: The Firefox Firebug add-on does not take margin left or right into consideration when it’s reporting elements’ widths. But when you are doing layouts, you definitely need to take that into consideration as well since margin-left and margin-right of boxes take space in the viewport.

border-box

If, on the other hand, you set the box-sizing value of a box to border-box, the value of a width property given to that element would refer to the width of the content area, border-left and border-right and padding-left  and padding-right of that element altogether. Let’s look at the following example,

For example, if you had the following,

div#id1 {
box-sizing: border-box; 
width: 20%; 
padding: 20px; 
border: 1px solid black; 
}

This situation for div#id1 would mean that the total width of div#id1 is just 20% of the parent element. padding-left (20px), padding-right (20px), border-left (1px) and border-right (1px) are going to be subtracted automatically by the browser from the 20%, no matter what value the 20% in pixel happens to be based on the width of the parent element. For example, if in this case, the width of the parent element of div#id1 is 1080px, then the width of div#id1 is going to be 1080 * 20% = 216px. The content area of div#id1 is going to have a width of 216px – 20px (padding-left) – 20px (padding-right) – 1px (border-left) – 1px (border-right) = 174px.

Please note that I have written no margin in the code snippet above. Also, I have written the values for width and padding in different units, width in % and padding in px. It comes in handy if you’re able to use mixed units when you’re dealing with CSS layouts for example with float or also using other techniques.

Box-Sizing CSS Property Practical Application

box-sizing: border-box; is useful in situations where you want/have to enter the values for width, padding and border of your HTML elements in different mixed units. For example, you enter the width in % and padding and border in px. If you are developing a layout and have identified the width of some section of your layout in % and the width of padding related to that section in px, then there’s no way for you to calculate the total width of the section anymore if the box-sizing property of that layout section is set to content-box. In that case the total width would be “20% + padding-left-width + padding-right-width”. 20% is not a fixed value and changes based on the width of the parent element the layout section lives in.

In such cases, you set the box-sizing property of the layout section to border-box. Having the same example in mind, the total width of the the whole layout section would become 20% of the parent element the layout section lives in. The other element next to the layout section in the layout could have a width of 80% and you’re done.

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:

Manipulate Normal Document Flow to Create CSS Layouts – Float Technique

The goal of this article is to introduce to the concept of “normal document flow” in a browser and how you can manipulate it.

This post is part of a CSS Layout Course that will teach you how to create a functional layouts in CSS using the float technique. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.

When you are writing an HTML document, you’re positioning the boxes or elements probably without knowing it. You basically do this in two different ways:

  • You choose some sort of order in order to put your HTML tags in your HTML documents for example, in header, you usually first write an h1 element to denote the main theme of the whole website and then write a p element to give the reader some information about the contents of the h1 tag. Well, you might do this in different ways depending on the nature and purpose of the project but you almost never write the p element first. That almost never happens. So the order that you choose is going to determine in what order you’re going to have the two elements appear in the browser window.
  • Every html element that you write in an HTML document takes some sort of default value in your CSS automatically if you don’t change the default value. For example every HTML element has a CSS property called “position”. The value of the position property is by default always set to “static” for all the elements on the page unless you change them. position: static; basically means that all elements are going to appear in the document in the browser in some sort of natural flow and flow throughout the whole page. So if you don’t change the default value of the CSS property position, you are actually setting it to “static”, which means you have chosen the normal document flow. The document flow is basically the state when the browser is going to take care of everything for you, position-wise. If you manipulate the document flow, you’ll be responsible to make sure everything on the page is going to be positioned properly so that your content is accessible to the reader.

So now, you know about the normal document flow. Our goal here is to manipulate the normal document flow in a safe way, that is, in such a way that you position everything you need everywhere you wish to, without disturbing other elements. for this purpose you can use other values of the CSS Property position. We said that the default value is “static”. The other possible values are “absolute, fixed, relative, initial and inherit”. initial and inherit are not values specific to the CSS “position” property. They can be set in case of almost all the CSS properties. So we’re not going to talk about them here. “absolute, fixed and relative” are the values that we need to understand in order to be able to manipulate the normal document flow in the browser window.

There’s one more way to manipulate the normal document flow and that is using the CSS “float” property. float is a very special case and behaves in strange ways. float was originally supposed to be used for floating text around an image on your website but web designers used it to create CSS layouts mainly because CSS didn’t have any tools to create layouts back around 10 years ago. We are still using float to create layouts (in some cases – there are other tools as well) although CSS3 has introduced the CSS property “flex” but not all browsers understand flex yet. Moreover, it’s going to take some time for developers to change the way they do layouts. Everyone is using techniques like using float to create layouts now.

This post is part of a CSS Layout Course that will teach you how to create a functional layouts in CSS using the float technique. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.