New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Page Layouts
Illustration by

Calculating em values


From:

CSS: Page Layouts

with James Williamson

Video: Calculating em values

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.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

Viewers: in countries Watching now:

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.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subjects:
Web Web Design
Software:
CSS
Author:
James Williamson

Calculating em values

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.