The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

CSS Size Units

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Understanding CSS Units ...

CSS (Cascading Style Sheet) size units are divided into three different categories, relative units, absolute units and percentage units. If you are creating web pages then the trick is to learn the technique of using these measurement units to make your output appear acceptable in all web browsers. This page also explains CSS URLs and how to load background images using CSS. Coding examples are provided.

CSS Size Units Primer ...

It is important to remember that CSS size units are designed to be used for many different output mediums, not just by web authors creating web pages. Because of this, you should be cautious about using absolute units when scripting web pages because your web page is certain to be displayed at several different resolutions, dependent on the settings of each individual users computer display. Remember this is something over which you have no control and do not make the mistake of believing that every user will be using the same screen resolution that you use.

For example, if your final output was being printed then it is almost certain that you would know the size of the page when you were composing the layout. Under these circumstances using absolute measurement units like inches or centimeters would be entirely appropriate. However, if you were creating output for a browser on a computer screen then using inches or centimeters would be wholly inappropriate. Would you be creating your output for a 14" screen, a 15" screen or even a 24" screen? Would the screen resolution be 640x480, 800x600, 1014x768 or even greater? If you are creating web pages then you just don't know the answer and this means that where possible, you should learn to use measurement units that are relative to the page content, not absolute.

CSS Measurement Units ...

In web authoring, all CSS measurement units relate directly to the width or height, or the relative width or height, of elements on a web page. One very good technique is to study and copy the styles of other authors web pages, particularly those that look professional and well presented. You should always try to use relative units rather than absolute units.

Relative Units

em ems, the height of the element's font
ex x-height, the height of the letter "x"
px pixels, relative to the canvas resolution

Relative Font Size Keywords ...

font-size: [ larger | smaller ]

Absolute Units

in inches; 1 inch = 2.54cms
cm centimeters; 1cm = 10mm
mm millimeters
pt points; 1pt = 1/72 inch
pc picas; 1pc = 12pts

Absolute Font Size Keywords ...

font-size: [ xx-small | x-small | small | medium | large | x-large | xx-large ]

Percentage Units

Percentage values are relative to the existing values that have previously been defined for each property. For example, a percentage value is often relative to the element's font size.

 
+++ User Classes +++
Novice Class {
Users who are afraid that simply pressing a key might break their computer}
 
Intermediate Class {
Users who don't know how to fix their computer after they've just pressed a key that broke it}
 
Expert Class {
Users who break other people's computers}
 

CSS Color Units ...

There are five different ways you can specify color in CSS styles and these are color names, 3-digit HEX color codes, 6-digit HEX color codes, RGB decimal color values and RGB decimal percentages. Remember that 'color:' styles relate to text color and 'background-color:' styles relate to the background color of a page or area on a page.

examples of different ways of achieving the same end result ...

<style type="text/css">
<--

body {
background-color:aqua;		/* Color Name - see paragraph below */
background-color:#0FF;		/* 3-digit HEX #RGB code - range 0 ... F */
background-color:#00FFFF;		/* 6-digit HEX #RRGGBB code - range 00 ... FF */
background-color:rgb(0,255,255);	/* decimal RGB integer values - range 0 ... 255 */
background-color:rgb(100%,0%,0%);	/* decimal RGB percentages - range 0.00% ... 100.0% */ 
}

.paraText {
color:maroon;		/* Color Name - see paragraph below */
color:#800;		/* 3-digit HEX #RGB code - range 0 ... F */
color:#800000;		/* 6-digit HEX #RRGGBB code - range 00 ... FF */
color:rgb(128,0,0);	/* decimal RGB integer value - range 0 ... 255 */
color:rgb(50%,0%,0%);	/* decimal RGB percentages - range 0.00% ... 100.0% */ 
}

-->
</style>

The color scheme depicted here would render a horrible looking web page (maroon text on a aqua background) but it does demonstrate the use of high definition, contrasting colors for the text and background. You should try and avoid using color names if possible because there is only a limited range of names that can be used safely and color names can cause problems when viewed in different browsers or on different platforms. By far the most popular way of specifying color on web pages is to use 6-digit hexadecimal color codes and we have provided the following links which should help you to understand how to use HEX color codes successfully.

CSS Image URLs ...

One question that I frequently hear asked is how do you apply a background image to a web page or to a particular area on a web page. If you study this page you will see that we have applied a background image to the header area, the footer area, the menu roll-over effect and the page heading. Whenever you use an image as a background on a web page, you should always specify a similar color as a background color so that if the background image file becomes separated from the page then the overall ambience will be similar to your original intentions.

Examples showing how to apply background colors and images to a page ...

<style type="text/css">
<--

body {
background-color:#FFCCFF;
background:url('../images/bright-back.gif');
}

.headerArea {
background-color:#CC3300;
background:url('../images/red-back.gif');
}

-->
</style>
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - CSS Size Units Primer Learn the different measurement units you can apply in CSS (e.g. pixels, points, etc.). Size units are divided into three different categories, relative units, absolute units and percentage units.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
CSS Size Unit Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England