CSS Units of Measurement – Part 1

Hi there! So my readers are here for the promised post on CSS units. I sure am happy and I won’t dissappoint.

Due to the sheer length of the post I decided that I will do this article in a part series. Even then, I have made some assumptions that the reader must know:

  • Defining CSS classes and how to apply them on elements
  • CSS parent-child class hierarchy

For those of you who need to brush-up their CSS skills W3Schools has a good CSS reference section and, of-course, there’s no substitute for self-practice.

If you are aware (or even slightly so) of the above then let’s begin.

The CSS units of measurement

CSS Units
Valid CSS units of measurement supported by current browsers.
basic _ _ % (percent)
_
_ _ px (pixel)
_
typography _ _ pt (point)
_
_ _ pc (pica)
_
_ _ mm (millimetre)
_
_ _ cm (centimetre)
_ _
_ _ in (inch)
_
_ _ em (em – pronounced “M”)
_
_ _ ex (ex – pronounced “x”)
_ _

Every web developer is aware of atleast the basic CSS units. For simple everyday pages it is something that get’s the task done without much bother. This part series will take you through the basic units as well as make you more aware of the typographical units and their usage.

For starters we shall take a look at each unit one-by-one.

1. Percent (%)

Type: Relative

Most CSS properties accept percentages as units of measurement. Common properties which receive units in percent are (but not limited to) width, height and font-size.

Let’s follow some examples. Here are some CSS classes.

.Font16 {
    font-size: 16px;
}

.Font24 {
    font-size: 24px;
}

.BigFont {
    font-size: 200%;
}

All look nice and good eh! Now how about applying them to some HTML.

<div class="Font16">
    <div class="Font24">Hello world!</div>
</div>

This example is pretty straight forward. The parent div is applied a font-size of 16px while the child is applied a font-size of 24px. Now the fun part.

<div class="Font16">
    <div class="Font24 BigFont">Hello world!</div>
</div>

Alright, all of you who realized that “Hello world!” will show up in 48px font-size, pat your backs. You are one of countless others who have got it wrong. Whenever you apply two or more CSS classes to an element with the same property but different value (font-size in our case), CSS overrides this conflict by only using that particular property value from the class that was defined last. So first you say “apply 24px”, and then to the same element you say “apply 200%”. CSS will choose the property from the class which was defined last. In our case that’s BigFont, so out goes 24px and 200% takes priority. Well what’s the correct answer then?

CSS font-sizes are inherited. So, our target div “inherits” 16px from it’s parent div (Line 1). Then 200% font-size is calculated by the browser and applied.

16px x 200% = 32px

32px is the correct answer. Smiles everyone. That’s one mystery solved! Now you are ready to answer the next puzzle. I have swapped the order of “BigFont” and “Font24”. What will be the final font-size applied in the following case?

<div class="Font16">
    <div class="BigFont Font24">Hello world!</div>
</div>

So what’s the answer? 24px? Well, the answer has not changed. It is still 32px. I can already see some of you pulling your hair and others going to close the tab on their browsers. But wait! I am not going to keep you guessing. Let’s highlight what I said earlier.

Whenever you apply two or more CSS classes to an element with the same property but different value, CSS overrides this conflict by only using that particular property value from the the class that was defined last.

Huh! Okay let’s see the order in which I defined the CSS classes.

.Font16 { ... }

.Font24 { ... }

.BigFont { ... }

You see, I defined the CSS class BigFont after Font24. In which order I apply classes to elements does NOT matter. If I were to define the classes the other way round my entire example would reflect the font as 24px.

Now I will add a little something to my CSS.

.Font16 {
    font-size: 16px;
}

.Font24 {
    font-size: 24px;
    font-weight: bold;
}

.BigFont {
    font-size: 200%;
}

Consider the original HTML example.

<div class="Font16">
    <div class="Font24 BigFont">Hello world!</div>
</div>

The font-size property get’s overridden with 200% as that property has a conflict. What about font-weight? As there is no conflict, the font-weight is applied as bold and it stays there. So you finally get “Hello World!” bold with 32px.

Hello world!

Go ahead! Inspect the above text using Firebug for Firefox or the in-built Web inspector in Chrome/Safari.

Hmm.. A lot is still remaining. But what a lengthy post. We’ve only covered one unit so far, but units are not the only thing we are learning. We are learning the way CSS works. Something that might help many CSS newbies out there to start using it better.

This marks the end of Part 1 of this series. I hope you’ll liked the article. Please post your comments and feedback while I start preparing for Part 2. Enjoy!