Learn CSS, part 2: Units of Measurement - Using Pixels
(Page 2 of 5 )
Web designers are accustomed to using the pixel unit to measure the font of text, as in the following example. Save the following CSS code into a file with the name Paragraph.css, and put it in the same directory as the HTML Web page.
p
{
font-family: Arial, sans-serif;
color: red;
font-size: 15px;
}
Here is the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title>Measurement Units with CSS</title>
</head>
<body>
<p>
CSS is a powerful formatting language for the web that is being used
with markup languages like HTML, XHTML and XML and that's because the
natural of the language. CSS uses the markup element name for applying
formatting styles.
</p>
</body>
</html>
You will get the following results when you run the page.
Actually, we did nothing more than use the font size property to define the size of the font as 15 pixels. Note that you must place the abbreviation of the unit right after its value, as we did in the above example (15px). Let's talk a little more about pixels. A pixel is a colored small square in the display area of your screen. Its size is not absolute; it's relative to the screen resolution.
In other words, we can't know how many actual pixels are in one actual inch because pixels are relative to the screen resolution. If the screen resolution is 800 x 600, then a text that has been defined as 40px will be larger than the same text on a screen with 1024 x 768 resolution. This is because with the latter resolution, each row has 1024 dots (pixels) instead of 800, so the screen has to accommodate itself to the additional 224 pixels by dividing the display area by 1024 pixels (instead of 800). That means that the size of the pixel in the new resolution will be smaller than it was with an 800 x 600 screen resolution.
The best use of the pixel unit is for positioning and layout elements, but not fonts. Microsoft Internet Explorer 5 and 6 can't resize the text (through the View Menu --> Text Size Sub Menu) if it's using pixels, and this is a drawback. Although Mozilla can resize text that uses pixels, Microsoft Internet Explorer has more than 80 percent of the browser market; we can't just ignore that. So try to use pixels for positioning your elements, and avoid using it for styling fonts and printing documents.
Next: Using em and ex >>
More Style Sheets Articles
More By Michael Youssef
/ 19 
