CSS 101 | Part Six - CSS and the Units of Measurement

In CSS, when you assign a numerical value to an element (be it width, height, padding, border) you must specify a unit of measurement, otherwise the browser won't know what to do with that specific property. If you tell the browser, I want this div to be 1 high, the browser will say (if it could talk, of course) - one what?. There is no default value that kicks in should you not specify a unit of measurement — unless you're assigning 0 to something, in which case a unit of measurement isn't necessary.

Zooming in

In most modern browsers, when you resize or decrease the page, everything on the page resizes in relation to everything else. If the width of your layout is 750 pixels, when you resize your page, the width may seem to have increased, but it hasn't. The magnification has changed. Not your layout. Your width is still 750 pixels, just the order of magnification is greater than before.

Zooming in and out seems to have taken the place of resizing fonts, but Firefox still enables you to do this (by checking Zoom Text Only).

Relative Length Units

Relative length units specify a length relative to another property. They are useful as they scale well between different mediums and produce consistent results.

Ems

Em units are a popular unit of measurement. If you haven't specified a font-size for a specific element (either directly or through a parent element or ancestor element), the em value is relative to the default font-size of the browser, where 1em equals the browser's default font-size. If you have specified a font-size on a parent element or ancestor element, then the em value is relative to that, where 1em equals the font-size on the parent or ancestor.

Like pixels and unlike percentages, em units don't resize when you resize the window.

How to write ems in CSS

Ems are written using the abbreviation em.

CSS Code:

           
            div.parent {
            	font-size:2em;
                width:11em;
                height:4em;
                background-color:#CF6;
                padding:.5em;                  
            }
            
            div.child { 
            	font-size:1em;           	
                width:11em;
                height:2em;
                background-color:#933;
                line-height:2em; 
                margin-top:.5em;
            }
        

(X)HTML Code:

            <div class="parent">
            	The parent element.
            	<div class="child">
            		The child element.
            	</div>
            </div>

        

Result:

In the example above, we have a parent element with a font size of 2em and a child element with a font size of 1em. The font size of 2em on the parent container sets it to double the current font size. The current font size is what I have set in my stylesheet, which is 80%. So the text in the parent element becomes double the size of 80%, which is 160%.

The child element has a font size of 1em, which sets it to whatever the font size is set to on the parent element — thus both parent and child produce text of the same size.

Exes

Exes are a relative unit of measurement, where 1ex is equivalent to the x-height of the current font. This is often the height of the lowercase letter x in that particular font, although exs are still defined for fonts without the letter x.

Like em units, when the window is resized, ex units stay the same and do not resize along with the window.

How to write exs in CSS

Exs are written using the abbreviation ex.

CSS Code:

           
            div.parent {
            	width:25ex;
                height:4ex;
                padding:.5ex;
                font-size:4ex;
                background-color:#CF6;
            }
            
            div.child { 
            	font-size:1.75ex;           	
                width:25ex;
                height:2ex;
                line-height:2ex; 
                margin-top:.5ex; 
                background-color:#9FC;
            }
        

(X)HTML Code:

        	<div class="parent">
            	The parent element.
                <div class="child">
                	The child element.
				</div>
 			</div>
        

Result:

Because the current font size is fairly small, we have to specify large ex units to make our text legible and to give the parent and child elements a suitable width.

For more information on relative lengths, visit the W3C's CSS2.1 spec.

Percentages

Percentage units are calculated relative to the percentage value of some other element. This can be either a parent element or an ancestor element.

An example of percentage units

In CSS, 70% is equivalent to 11px. Supposing you like that size font, so you apply it to your body tag, which applies it to every other element on your page. You then create some styles for links and decide you want them to be slightly bigger than the body text. You would think that, giving them a font size of 100% would make them bigger. But in fact, 100% sets the links to the same value as the body text, because they are children of the body. Giving them a font size of 100% tells them to be 100% the size of the font value specified in the body - so they come out looking the same size as before you applied the styles.

To accomplish what we want, we give our links a font size of 120%. This makes them 20% bigger than the text in the body.

Percentages and heights

When you apply a percentage height to an element, the percentage is calculated relative to the contents of the element. But this only works for a value of 100%. Any other percentage value you specify will have the same effect as height:100%: it will cause the parent element to expand to fit its contents.

If you want your percentage height to be calculated based on the screen size, you must give your body tag and your html tag a percentage height. We will talk more about this in a later instalment, when we cover CSS layouts.

How to write percentages in CSS

Percentages are written using the % symbol.

CSS Code:

        	p {
        		font-size: 120%;
                padding:3%;
               	background-color:#0F9;
            }          
        

Result:

Some test text.

I haven't used an example involving dimensions (like the square from the pixel demonstration, because this would involve setting a percentage height on my html tag and that would ruin the layout of my website!

For more information on percentages, visit the W3C's CSS2.1 spec.

Absolute Length Units

Absolute length units are fixed units that resize in relation to each other. Out of the absolute length units, pixels are the ones recommended for web page design. I have included the others here so that you are familiar with them, but would recommend that you don't use them as they don't produce consistent results.

Pixels

Pixels are probably the most common unit of measurement when it comes to layout as they enable you to position elements precisely on the page, that generally won't move, no matter the resolution or window size of the user. According to the CSS2.1 spec, pixels are absolute units of measurement, however, the W3C CSS TIps and Tricks site doesn't include them as absolute units and instead described pixels as magic units not related to the absolute units. As CSS2.1 is the current version of CSS and pixels are in the spec as absolute units, we shall refer to them as such.

When using pixels for your layout, the size of your layout will remain the same — it won't scale — regardless of the size of the window, or the user's resolution. If your container is 750 pixels wide it will always take up 750 pixels of the screen, horizontally. The width will never change.

The drawback to this is that if you set your width to a certain unit, it might be fine for people with say, 1024x768 resolutions, but for people with large monitors, gaps will appear on either side of your layout. We will talk about how to overcome this in a future tutorial.

Pixels do have their issues in versions of IE7 and below but only when used to size fonts. If you set your font size in pixels, the text won't resize when zoomed in and out, which can lead to accessibility issues. Again, this is only when using pixels to size fonts in versions of IE below 8, and not for any other purpose and shouldn't deter you from using pixels for your font-size.

How to write pixels in CSS

Pixels are written using the abbreviation px.

CSS Code:

        	p {
        		font-size:12px;
                background-color:#F63;
                padding:8px;
            }
            
            div {            	
                width:60px;
                height:60px;
                background-color:#6CF;
                padding:8px;
            }
        

(X)HTML Code:

        	<p>Some test text.</p>
            <div>A test square.</div>
        

Result:

Some test text.

Picas and points

Picas and points are an absolute unit of measurement, used in the print industry. They aren't intended for web page design and will vary depending on the user's dpi, producing results that are too inconsistent for it to be worth your while using them.

How to write picas and points in CSS

Picas are written using the abbreviation pc. Points are written using the abbreviation pt.

CSS Code:

           
                div.pica {
                	width:16.6pc; 
                    height:2pc; 
                    font-size:1pc; 
                    background-color:#C60; 
                    padding:.5pc;
                }
                
                div.point {
                   width:200pt; 
                   height:20pt; 
                   font-size:12pt; 
                   background-color:#399; 
                   padding:6pt;
                }              
            

(X)HTML Code:

                <div class="inch">An example of picas.</div>
                <div class="millimetre">An example of points.</div>  
            

Result:

Inches and millimetres

Inches and millimetres are an absolute unit of measurement. Like picas and points, they aren't intended for web page design, as they can vary greatly between the various mediums and resolutions.

How to write inches and millimetres in CSS

Inches are written using the abbreviation in. Millimetres are written using the abbreviation mm.

CSS Code:

           
                div.inch {
                	width:2.3in; 
                    height:.5in; 
                    font-size:.16in; 
                    background-color:#6C3; 
                    padding:.1in;                     
                }
                
                div.millimetre {
                    width:60mm; 
                    height:10mm; 
                    font-size:4mm;
                    background-color:#C93; 
                    padding:2mm;
                }              
            

(X)HTML Code:

                <div class="inch">An example of inches.</div>

                <div class="millimetre">An example of millimetres.</div>  
            

Result:

For more information on absolute lengths, visit the W3C's CSS2.1 spec.

What units should I use?

You're probably wondering, what units should I use for my website? Well, with regard to font, the World Wide Web Consortium (W3C for short) the organisation responsible for creating web standards, recommend percentages, em units and pixels, because they produce consistent results that resize accordingly - which is a must when it comes to accessibility.

With regard to the dimensions of your website, what you use depends on the type of layout you're going for and your personal preference. When working with definite widths, and layouts which need to have elements in certain positions, use pixels; if you want a fluid layout that doesn't have a definite width, and is calculated based on the size of the window, use percentages. If you want a layout that resizes based on the size of the font - otherwise known as an elastic layout - use em units.

Don't worry if the words elastic and fluid don't mean anything to you. These are names for the various types of CSS layouts (and there is one more called fixed). We will cover these in a later instalment.

Conclusion

Out of all the units of measurement on this page, there are only four that are suitable for web page design: pixels, percentages, ems and exs. Inches, millimetres, picas and points really should be avoided at all costs. I personally don't use exs — but that's just personal preference. It's up to you if you wish to use them or not.

You will be pleased to know that this is the last tutorial which contains blocks and blocks of text. From here on out, we'll be focusing on practical examples. In the next chapter, I'll show you how to style paragraphs with CSS and after that, we'll move onto the CSS font properties.