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 – Inline 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.

This post talks about semantic inline elements.

Semantic inline elements are the kind of elements that describe the meaning of the text or content inside them. For example when you use the “strong” tag for a word inside a text, the purpose of the “strong” tag is to tell the reader that the word contained in the tag (the way the word is shown or represented in bold in the viewport) is a keyword or in some way important in the whole text. Some of the important inline elements in this category are,

  • span
  • em
  • i
  • strong
  • b
  • a
  • cite
  • code
  • q
  • sub
  • sup

 

  • Inline boxes are always as wide or high as the content inside them. You cannot use “width” or “height” on them. In other words, “width” or “height” cannot control their width or height. The height of an inline box can be controlled with “font-size”.
  • Again, “margin-top” or “margin-bottom” cannot control their margin-top or margin-bottom the way you might think about the classical box model.
  • If you use padding-top, padding-bottom, border-top or border-bottom on inline boxes, you need to be careful because the line height is not going to be influenced as a result of any of them. So you might end up with illegible text (lines, words or letter on top of others).

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:

Replaced 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 the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Replaced elements are the kind of elements whose shape, dimensions and appearance are controlled by external factors and resources. This is probably not the best definition for replaced elements but once you read the example, it’ll make sense to you. For example, <img> is a replaced element. When you write an img element in an HTML document, you either

  • write the images width and height or
  • you write neither of them or
  • you write one of them

In the first case, the width and height with which the element is going to be rendered in, in the view port is going to be dictated by the values specified for the width and height properties of the img tag. If the values don’t match those of the external image’s, then the rendered image is going to be proportionally distorted. If the entered value match exactly those of the external images’, the image is going to rendered proportionally correct.

In the second case, the height and width with which the image is going to be rendered is going to be the exact height and width of the image itself.

In the third case, the browser is going to take care of the proportions. For example if the height of the original external image is 100px and you write 50px as the height attribute, that’s 50% of the height of the original image. As a result of that, the width of the rendered image is going to be 50% of the actual width of the external image.

So as you can see, in these cases, the dimensions of the rendered box is going to be influenced by the dimensions of the source external image (to some extent). That is one good example of a replaced element.

A good way to remember replaced elements is that replaced elements are the kind of elements like <img> that will be replaced by an external content source like an image.

With replaced elements, there are two points that you should remember:

  • You cannot use generated content with them. (More about generated content later – not very important at this point)
  • Replaced elements usually have some sort of default dimension in every browser under each operating system and of course depending on the device as well. So if you had a “textarea” and applied some CSS rules to it to give it a fixed width, the width of the “textarea” would default to the default width for that browser if the CSS didn’t load for any technical reason.

Examples of replaced elements are,

  • img
  • object
  • video
  • textarea
  • input
  • audio (in some cases)
  • canvas (in some cases)

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-block 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 the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Inline-block boxes can be generated with the following CSS property:

display: inline-block;

Here’s are some important characteristics of inline-block boxes:

Inline-block boxes are just like inline boxes, in that they don’t take up the whole view port width. They take up only as much width as there’s content inside them.

In order to control the different box model properties of inline-block elements and boxes, you basically use the classical box model (the usual width, height, margin, border and padding) that you normally would use in case of normal block-level boxes.

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:

Block-level 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.

As the title of this post suggests, there are,

  • Block-level elements, and,
  • Block-level boxes

The term “element” refers to to source code that you write. The term “box”, on the other hand, refers to how that element is represented on the browser view port.

For example, when you write an HTML p tag in your HTML document and write some text between the opening and closing p tags, the whole combination of the opening p tag, the closing p tag and the text inside the tags is rendered or represented in a specific way in the browser view port. Among other characteristics, the text starts on a new line; the paragraph takes up the whole view port width, no matter how wide the browser windows is at the moment,  and no matter how much content the p tag has. Moreover, the next box starts on the next line in the view port.

The whole content of the p tags (the text) and the way the paragraph is represented in the viewport can be resembled to a box on the view port and hence the term “box”. You could therefore say that a box is the representation of an HTML tag and its contents in the view port. You’ll see this and we’ll explain it more in the video related to this lecture (see the course description below).

Now there are some characteristics of block level elements and boxes that you should be familiar with, especially if you want to create layouts, using HTML and CSS.

Block-level boxes, created from block-level elements in your HTML source code, always begin on new lines and break their own line. That means a p tag and all of its contents start on a new line and the next element in the code starts from the next line even if there’s still free space on the line not filled by the p tag contents.

Block-level elements can contain other block-level and inline elements. We’ll learn more inline elements later. For example, you can have a paragraph (opening and closing p with some text as its content) and inside the paragraph, you can have another same combination like the following:

<p>Lorem Ipsum is simply dummy<p>a block-level element inside another block-level element</p>  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>

block-level and inline  distinctions and terminology have been replaced with other terminology in HTML5 like “flow content”, “phrasing content”, etc. We’ll deal with them in another course. Those older specifications that we’re dealing with right now are covered in HTML specifications up to 4.01. As a web developer you need to know the older specifications as well since you’re still going to have to work with them at least in next 5 years to come.

Here’s a list of some block-level elements:

  • address
  • figure (HTML5)
  • noscript
  • article (HTML5)
  • footer (HTML5)
  • ol
  • aside (HTML5)
  • form
  • output (HTML5)
  • blockquote
  • h1, h2, h3, h4, h5, h6
  • p
  • br
  • header (HTML5)
  • pre
  • canvas (HTML5)
  • hgroup (HTML5)
  • section (HTML5)
  • dd
  • hr
  • table
  • div
  • li
  • tfoot
  • dl
  • main
  • ul
  • fieldset
  • nav
  • video (HTML5)
  • figcaption (HTML5)

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: