Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
Figuring out the value that you need for an element's width, height, or other physical properties is pretty simple if you use pixels. However, what if you are going to use a relative unit of measurement, like an em, or even percentages? Well, in those instances it can sometimes be tricky to accurately calculate the computed value of the element's properties. Now understanding how this works is critical to creating certain types of layouts, so it's really important for us to take a closer look at it. Now, if you remember, an em is a relative unit of measurement that is equal, 1 em is say equal to the default font size of an element.
Now if you need to review what an em is or any of the different units of measurement that are available to us in CSS, be sure to go back to the CSS: Core Concepts title and review the movie on units of measurement where I talk about them in a little bit more detail. Okay, so for this example we are going to be using the em_values.htm file. You can find that in 01_04 directory. And I just want to give you a brief overview of what's going on here on the page. Okay, so if I scroll down into the body tag of the page, I can see that I have an article with a heading inside of it, and then I have two sections.
The first section has a class attribute of em, and these sections are made up of a heading 2 followed by some paragraphs. The second section has a class property of percentages, and then we have a footer down here at the bottom of it all. Okay, now if I scroll back up into my CSS, I can see that on the HTML selector. I have a background applied that is that 10x10-pixel grid that we were using in the last movie. So that's going to help us visually sort of understand how these em values are being calculated. And the other thing that we have going on here is that for our body selector currently we have a font size of 100%.
Now what that's doing is it's going up to whatever user agent or browser, smartphone or tablet or whatever is viewing this page, and it's saying, "Hey, whatever your default font size is, go ahead and give me 100% of that." Now in most browsers, that's going to be about 16 pixels, but since adding 16 pixels to 16 pixels gets confusing for me after a while, I am going to change that value. So change that value from 100% to 10 pixels, that's a little bit easier. It gives us a nice little baseline to use, in terms of our font sizes. Okay, I am going to scroll down to about line 41. And I have some placeholder selectors there for heading 1, heading 2, and paragraphs, so we are going to start with those guys.
Since, ems are relative to font size, that's typically where I like to start describing them. So with h1, I am just going to do font-size of 3em; for h2, I am going to do a font-size of 2ems; and for paragraph, I am going to do font-size of 1.5em, all right. And we'll save that. So how is this value going to be calculated? Well, essentially anytime an element has an em used as a unit of measurement in a font-size declaration, it's going to go to that element's parent and it's going to say, "Hey, what is your font size?" And it's going to say, "Okay, fine. Well give me three times that or two times that or 1.5 times that," based upon whatever value you have given for the ems.
Now since, we applied 10 pixel's worth of font size to our body tag, that's now being inherited by all the elements on the page. So essentially the section tag that these guys are sitting inside of has a font size of 10 pixels, and that's what this value is going to be relative to. So if I save this and test this in a browser, you see that our font size now is relative to the 10-pixel value that's been applied to all the elements on the page. Now that is what happens when you apply an em value inside of font size. What happens when you apply or use ems on any other property? Well, then you have a slightly different way of calculating that value.
Let me show you what I mean. I am going to go back to my heading here and I'm going to apply a margin-bottom of 1 em to that. And I am going to copy this value because I'm going to apply the exact same value to my h2 and in my paragraph. Now, you might think, okay, fine, this is going to give us the same margin on our heading 1s that we are going to have on our heading 2s, that we are going to have on our paragraphs, but you'd be incorrect, because remember, ems are relative units of measurement. If I save this and preview this in my browser, you can see actually that I am getting about 30 pixels' worth of space after the h1.
I'm getting about 20 pixels' worth of space after the h2, and I am getting about 15 pixels' worth of space after paragraph. Well, now that actually makes sense, if you think about it, because anytime that you use ems as a unit of measurement for any property other than font-size, so margins, padding, border, whatever, what it does is instead of looking to the parent, it looks to that element itself. It basically says, "Hey h1, what's your font size? Okay, I want one of those. Hey h2, what's your font size? Okay, I want one of those." So in this case, if this is calculating to 30 pixels, 1 em is worth 30 pixels.
If this calculates to 20 pixels, 1 em is worth 20 pixels, and so forth and so on. So remember, if it's used on font-size, it's relative to the parent's font size. If it's used on any other property within that element, it's relative to that element's font size. Now that's true even if it's not declared. Let me show you what I mean. So if I come right after my paragraph, I can write a class selector for em, and I am just going to write another shell here for percentages. Now one of the great things about using relative units of measurements are that they are sort of platform- independent if you will.
So, for example, if I am told my paragraph, my body copy, to be 1em, on a browser, if the browser is using its default font size, that might be 16 pixels, but if the same thing is opened up on a smartphone, well, then the smartphone's default font size is going to be used at 1 em. So you can see how valuable it is to be using relative units of measurement. You are not tying your page to any one specific size that might not look correct on a specific platform. Okay, so if I go into my ems, for example, here, I might say, give me a padding of 1 em and for percentages, let's do the same thing, padding of 1 em.
Now I haven't explicitly declared a font size for either of these items; however, because we went ahead and applied 10 pixels to the body that's being inherited by each one of these elements, so we should end up with 10 pixels' worth of padding on both of these. So if I save this and test it, you can see that's exactly what happens. We get 10 pixels here. We get 10 pixels here. But remember, ems are relative, so if I come into the ems section and inside that I change the font-size there to 1.5-- and here is what's really interesting-- not only is the padding going to get bigger, so we should see more padding on the em than we have on percentages, but everything inside of it is going to be slightly larger, because remember, this heading 2 and this paragraph for their font-size, they are both going to their parent elements and they are saying, "What's your font size? Okay, I want two times that, or 1.5 times that." So inside the percentage section it's still at 10 pixels, but now in the em section that's actually a little bit larger. Same thing with their margins. Same thing with all those values.
They all should scale up in a relative fashion. So if I save this and test this in the browser, you can see that's exactly what happens. Everything that's inside of that section gets a little bit larger--1.5 times the size it was before actually--whereas, everything inside the percentages stays the same. So that's the value of using a relative unit of measurement. It's very easy to make a global change to a top-level object like that and have the relationship or the sizing relationship of all the elements inside of it stay the same. I really doubt that you are going to create an entire layout using nothing but ems. Now those layouts do exist and people do do them, but they're fairly rare.
It's actually a lot more common to use ems for margins and occasionally padding for specific elements, and it's really common to use for font size. Now regardless of where you are going to be using ems, it's important that you understand the rules that the browser is going to use for determining what the calculated value will be, so that your layout and then all of the elements within it look the way that you intend them to.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.