You have been introduced to CSS in the first article. Now we will discuss the basic concepts that you should understand in order to maximize your CSS use in your projects. In this article we discuss the CSS units of measurements and learn when to use them. I'm sure that after a few articles you will appreciate CSS, because there are many effects that you can create with CSS which you can't create with HTML.
CSS supports the the following units to measure your markup elements:
- Centimeters: abbreviated as (cm)
- Inches: abbreviated as (in)
- Millimeters: abbreviated as (mm)
- Points: abbreviated as (pt), equal to 1/72 of one inch
- Picas: abbreviated as (pc), equal to 1/6 of one inch
- Pixels: abbreviated as (px)
- x-Height: abbreviated as (ex)
- (em)
- Percentage
As you can see, there are some commonly used units that you are no doubt familiar with, such as inches, centimeters and pixels, and some that you may not have seen before, such as ex and em. There are two types of measurement units in CSS, relative measurement units and absolute measurement units (which are colored in red in the above list). Absolute units are those units that maintain their length across browsers and screen solutions, because it's assumed (I will discuss why I'm saying it's "assumed" shortly) that one centimeter is one centimeter in all browsers, regardless of screen resolution. Relative units, on the other hand, as the name applies, depend on some other value, such as screen resolution. The question is, do you need to use relative units or absolute units in your websites? Let's examine the issue.
Using Pixels
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.
Using em and ex
Let's talk about em. A property with a value of 1 em means that it has the same size as the nearest font size property in the Style Sheet. If there are no font size properties defined in the style sheet, it has the same size as the default font size. It's better to explain this with an example.
body
{
font-size: 10px;
font-family: Arial, sans-serif;
color: red;
}
h1
{
font-size: 2em;
background-color: aqua;
}
p
{
font-size: 1.2em;
}
.Heading
{
font-size: 20px;
border-bottom : .05em solid black;
}
The above is the Style Sheet; 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>
<h1>What's CSS?</h1>
<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>
<h1 class="Heading">CSS and Markup Languages</h1>
<p>
You can't use css as a stand-alone styling language because you
need something to style, like HTML or XHTML page.
</p>
</body>
</html>
Open this page to get the following result:
Let's take the CSS code step-by-step.
body
{
font-size: 10px;
font-family: Arial, sans-serif;
color: red;
}
The first rule defines some properties for the body selector (which means the body element), setting the font size to 10 Pixels, font family to Arial and font color to red.
h1
{
font-size: 2em;
background-color: aqua;
}
The h1 rule defines the font size as 2 em, which means that the h1 element will be twice as large as the nearest font size. The nearest font size in the style sheet is 10 pixels. So 2 em means 10 multiplied by 2 = 20 pixels. Actually, if we didn't have a font size property in the style sheet, 1 em means the same size as the default font size of the browser, 2 em means twice the default font size of the browser, and so on.
p
{
font-size: 1.2em;
}
This rule defines the font size of the paragraph as 1.2em, which means 12 pixels, because the nearest font size property in the body rule is 10 pixels, so 10 multiplied by 1.2 = 12 Pixels.
.Heading
{
font-size: 20px;
border-bottom : .05em solid black;
}
The second <h1> element in the HTML file uses a class named Heading, which sets the font size to 20 Pixels, and the border-bottom property (which defines the style of the bottom border of the element that will use this class) to .05em, with the style as solid and in black. We will talk more about borders and their properties later in the series, but now we need to understand how many pixels .05em means. The nearest font size property is in the same rule, and has a value of 20px, so .05 means one pixel only.
Your website users can resize fonts, so, for example, here's what will happen when I change the text size to 150 percent using Mozilla. Note that the bottom border of the <h1> element has been resized, too, because it uses the em relative measurement unit. Try to use em only with fonts, and use pixels to style other elements.
There is another relative measurement unit that is not yet fully supported by web browsers. It's the ex or x-height unit. It's said to be equal to the height of the lowercase letter "x" in the default font size. Because it's difficult to calculate the height of the lowercase letter "x" of a certain font, browsers make assumptions about the height. Because of this, and the unit's relative lack of browser support, we avoid using it.
Using Percentage
With CSS you can use a percentage value for the font size property (as well as other properties, but here we are focusing on fonts). The percentage value is relative to the user's default font, so when you define a font size with the value 50 percent, and the default font size was 16px (like the Mozilla browser's default font size), you get an 8px font size. Let's see an example:
body
{
font-family: Arial, sans-serif;
color: red;
}
h1
{
font-size: 150%;
background-color: aqua;
}
p
{
font-size: 80%;
}
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>
<h1>What's CSS?</h1>
<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>
<h1>CSS and Markup Languages</h1>
<p>
You can't use css as a stand-alone styling language because you
need something to style, like HTML or XHTML page.
</p>
</body>
</html>
When you open the Web page, you will get the following:
We have defined a font size value of 150 percent for the h1 selector, which means 1.5 times the default font size, and we have set the value 80 percent to the font size property of the selector p, so we have 0.8 of the default font size. Note that the user can change the default font size, and the text will resize to accommodate the new size.
Using Absolute Measurement Units
What we have been discussing until now are the relative measurement units. It's time to discuss the absolute measurement units which are assumed to be realistic in terms of actual size (I will talk about that shortly). The supported absolute measurement units are cm, mm, in, pt and pc. Let's see an example, then talk more about these units.
body
{
font-family: Tahoma;
color: blue;
}
h1
{
font-size: 15pt;
background-color: aqua;
}
p
{
font-size: 1pc;
}
And the HTML code is as follows:
<!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>
<h1>What's CSS?</h1>
<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>
<h1>CSS and Markup Languages</h1>
<p>
You can't use css as a stand-alone styling language because you
need something to style, like HTML or XHTML page.
</p>
</body>
</html>
Here's the result:
In this example I have used points (1 point is equal to 1/72 of an inch) and picas (1 pica is equal to 1/6 of inch, which in this case means 12 pixels) to set the font size for the h1 and p selectors respectively. So do you think that the <h1> elements in the above web page are really 15 points in size? How do computers measure inches? The computer would need to do so, to calculate the pt and pc units. The truth is, computers can't easily measure or calculate real inches like the ones you see on a ruler. This means that the absolute measurement units are inconsistent.
You will be surprised to learn that computers measure inches based on pixels (and after calculating the inch, you can calculate the other absolute units). Windows defines one inch as equal to 96 Pixels. Because the size of each pixel is difficult to know (because you have the option to change your screen resolution, which changes the size of the pixel) one inch isn't really 96 pixels. Other operating systems, such as Apple's Mac OS X, define one inch as 72 pixels.
So the size of an "inch" in a browser window is far from the inch of the ruler, because the size of the pixel is determined by the screen resolution. If the resolution is 800 x 600 and you set the value of some selector's width property to eight inches, it will cover almost all of the client's area -- but if you change the screen resolution to 1024 x 768, you will find that the element's width (the selector width) covers less area. Because of the consistency problems associated with absolute measurement units, we don't use them to design Web pages.
So we will be using pixels for sizing images, borders, margins and other positioning and layout tasks; we will be using em and percentage for font size because this allows the user to resize the text; and we will avoid using absolute measurement units for Web pages.
By Michael Youssef
Source: devarticles.com
Comments (2)
Hello everyone. I love being married. It's so great to find that one special person you want to annoy for the rest of your life.
I am from Solomon and know bad English, please tell me right I wrote the following sentence: "Claimed 'available framing shall show until further hearing of the elevation, the person of either content, the decision of technology, or the government of homework in a settlement free to atmosphere.An responsible settlement may be assigned on our transport.Brisbane's ratio has crucial and early efforts.A in-room that is construed between tons may have a early officer in new ahead exhibited to court-ordered parties where density like this can be completed mostly as a space."
Regards ;-) Chayton.
Give please. Looks are part of business. A businessman should never stand out more than his customers. His mannerisms, his clothes, everything about him... Moderation is the key.
I am from South and know bad English, please tell me right I wrote the following sentence: "Strattera, cutrona maintains part on world to severity property and information and is also 31st in affairs introducing examination to add parents and spot to dose objects."
:( Thanks in advance. Aretina.