Join James Williamson for an in-depth discussion in this video Working with units of measurement, part of Dreamweaver CS5 Essential Training.
When working with either typography or layout, it is crucially important that you understand the different units of measurement that CSS allows you to use, and when you would use one over the other. When you discuss units of measurement in CSS, there are two general categories: Absolute and Relative. Absolute, which can also be referred to as fixed units, delineate a fixed size, one that does not change based on any other factors. Relative units of measurement look for either a parent element or the user agent itself for a base value to begin with.
With those two categories in mind, let's take a look at the options available to you when specifying sizes in your styles. So here we have measurement.htm opened up, and we're just going to go through a couple of these units of measurement. Let's talk about points first. Now points are units of measurement that are designed for print. They are, in fact, 1/72 of an inch. So what does that translate to on the screen? Now that's a very good question. You need to know the resolution the monitor is set to, as well as the operating system, to answer that one.
Avoid using points for onscreen font measurement and restrict its use to print stylesheets where it belongs. Now what about inches and centimeters? Well, again, they're just what you think they are. They're useful for other media types, but really probably shouldn't be used for onscreen media. Let's move on, and talk about Relative units of measurement. What about ems? Well, ems are, hands down, the most popular relative measurement for onscreen sizing. An em is best described as being the equivalent of the size of a capital M for that particular font.
An ex is equal to the x- height of that specific font. The size of the font can change dramatically as font-families are substituted. So it should be used with care. Now percentages, values are pretty straightforward. A percent value sizes the text to the percentage of its inherited or default value. Now pixels, they're based on the current resolution of the viewing device. Because it relies on the resolution of the user agent, pixels are sometimes referred to as a relative unit.
Now in truth, setting units to pixels fixes them at that size. There are several reasons to avoid using pixels for font measurement. Internet Explorer, prior to Version 7, did not allow the onscreen resizing of pixel-based font sizing. So users of earlier versions of Internet Explorer will not be able to change their font size based on their own viewing preferences if you use pixels. Also, pixel sizes that might look good on a monitor might be far too large for the mobile environment. Pixel-based font sizes don't scale too well between environments.
It's best to avoid using pixels for font sizing when possible. Now most browsers do start with the default font size. And for the majority of browsers that default font size is 16 pixels. We're going to do a really quick exercise where we take advantage of our browser's default font size and compare a relative unit of measurement with a fixed unit of measure. So I'm going to scroll down to the bottom of this page, and I can see that I have one paragraph that says, "Make this paragraph 16 pixels tall," and then there's another paragraph right below that that says, "Make this one 16 pixels tall too, please." Now both of these are paragraphs that have classes applied to them.
You'll notice that the first paragraph says <p.resize>. The second one is <p.resize2>, so we have classes resize and resize2, okay. I'm going to go over to my CSS Styles panel, and I'm going to go scroll down until I find those two selectors, <p.resize> and <p.resize2>. The first one, I'm going to go ahead and add a property to that. And I'm going to add the font size property. So font-size, again you can get that through the pulldown menu if you'd like. If I hit Tab, I get to go over and set the unit of measurement here.
So for the first one, I'm going to go ahead and set that to pixels. So I'm just going to type in 16 pixels. Okay, mission accomplished. Hey! Nothing really changed here. Hm, okay. Well, I'm going to go down to <p.resize2>, add a property there. And again, I'm going to do font-size, and here, instead of 16 pixels, I'm going to type in 1em. No change. Interesting. Okay. Let's preview this in our browser and see if we have any change, or if we notice the difference between the pixels, which are on top, and the em, which is on the bottom.
So we're going to go ahead and Save that and Preview that in my browser, and I'm using Firefox, but feel free to use any browser you want with this. Now if I scroll down, you can see you can't really tell a difference between the two of them. The top one is being sized using pixels. The bottom one is being sized using ems. So you might say, "Well, okay. So then what's the big deal?" Why do we even care which one we're using? Well, the reason that they're both the same size is because my browser is currently set to a default font-size of 16 pixels. So the 1em that the second paragraph is doing is sizing to one times or 100% of that size, which equates to 16 pixels.
Well, let's take a look at what happens if your user changes that within your browser. So I'm going to go up to Tools, and if you're in a different browser, you might find this in a different location, but for Firefox, I'm going to go to Tools and choose Options. And if I click on the Content tab, notice that I have a Default Font and a Default Size, and sure enough, there it is set to 16 pixels. Now if I change that, let's say I go down to say 14, if I click OK, notice that now we can see the difference. The font up top that is sized as 16 pixels remains 16 pixels, whereas the one on the bottom changes to reflect the new browser settings.
So because it says 14 pixels, now 1em is equal to 14 pixels. So that relative unit of measurement is very handy for users that might have set different preferences for their browsers. They're still going to get everything scaled to the relative size that you need it. So let's say somebody has a vision disorder, goes in their Options and cranks that up to say around 18 pixels. Well, they can read your text just fine, whereas if you'd set it explicitly at 16 pixels that would override the browser, and we would force them to look at a size that they don't really want to look at.
So as a general rule ems are the preferred unit of measurement for online type. As always, there are exceptions to this rule. Older versions of Internet Explorer seemed to have problems with font- size values that are defined strictly as ems. As a workaround, most designers will size the body selector using a percentage value and then define all other measurements in ems. This seems to fix those IE-specific problems. Now since font size is by and large inherited, meaning if you apply a font-size to a parent tag, all the tags inside of it gets the same size, it makes sense to carefully plan a sizing strategy for your site, pick a unit of measurement, and take care to stay consistent throughout your site.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video
Skill Level Beginner
Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7. The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?
A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements. Following the steps above should solve the problem.
Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.
If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.
Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?
A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.
CSS should always be used for presentation, not HTML.
Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?
A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.
Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?
A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.
Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.
A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.
However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.
HTML5 Doctor also has a nice article on the figure and figcaption elements at http://html5doctor.com/the-figure-figcaption-elements/.