CSS Units of Measurement – Part 2

Hello! Well I am back from a long break to post the second part of this series. I got little, but valuable, feedback on my last post, mostly verbally and on twitter. I encourage you guys to leave feedback in the comments. Any questions are also welcome.

Last time we learnt about percent (%). Today we will learn about pixels (px).

2. Pixel (px)

Type: Absolute

Pixel stands for Picture element. Just as with the percent unit, all CSS properties that accept values of measurement support the pixel unit (this holds true for all CSS units of measurement actually, I won’t be repeating this henceforth).

The pixel is the most important unit in the computer graphics domain. Why? Well there are a couple of reasons, both scientific and human:

• Everything that is drawn on the computer has it’s basis on a pixel. It is the smallest representable unit on a digital canvas.
• No matter what units we use on a computer it is finally and absolutely converted into pixel units. This means you can use %, pt, pc, cm, mm, in, em or ex; but finally all of these are converted into the unit that the computer actually can use to draw, i.e. pixels.
• Lastly, many people feign ignorance to the understanding of the pixel and that, according to me, makes it more important to learn than any other CSS unit that you may have come across.

Before I start with defining a pixel I’d like to bring to your notice some real world physical unit. Since my side of the world uses the metric system I’ll start with the “cm” unit.

So what is 1cm? Let’s see how Wikipedia defines a centimetre.

A centimetre (American spelling: centimeter, symbol cm) is a unit of length in the metric system, equal to one hundredth of a metre, which is the SI base unit of length.

One hundredth of a metre eh? So then what’s a metre?

The metre is the length of the path travelled by light in vacuum during a time interval of ¹⁄_{299 792 458} of a second.

Ugh! What’s with the numbers here? Well all the number crunching was for the nerds amongst us. What I am really trying to say is that no matter where in the world you go, 1cm will be of the same measure. It does not change for you or for anybody else for that matter. (I am not going to discuss about accuracy errors. For the common man 1cm measures the same everywhere.)

Ok. So why all this talk about centimetres when clearly this article is supposed to be about pixels? All this was to bring a simple (but often ignored) concept to the forefront about pixels.

A pixel is a virtual measure of graphical size. Therefore, the real world physical size of a pixel is not the same everywhere.

When a pixel is rendered on screen it may not be the same size for all computers/devices i.e. a 20px x 20px box on one screen may not be the same physical size as a 20px x 20px box on another screen. Look at the image I have prepared below. This will give you a clearer idea.

At the same resolution, but different physical monitor size, the two boxes appear to be of different sizes. Why is that so? The fact lies in that the pixel is a virtual unit. Let’s dig deeper. Look at the matrix below.

That’s how your computer’s graphics unit renders in pixels. For the graphics processor it’s just a matrix of dot’s that need to be filled. No matter which computer you use, a 20px x 20px will fill 20 dots across and 20 dots down in this matrix. For the monitor however, it’s a different story. It has to occupy the whole screen area (of its own representation of dots) with this matrix. The monitor stretches this matrix in order to occupy the entire screen area. That’s why the 21″ monitors’ box appears larger than the 17″ monitors’ box.

In the real world, this difference may extend across 21″ (or any same size) monitors of different companies/models too. That’s why I said that a pixel is a virtual measure. You cannot predict the actual size the user will see. However, this difference in appearance isn’t too visually great to whine about and such differences are generally ignored by the end user. (Most of us use just one monitor at a time anyway.)

That answers why pixels aren’t the same across monitors. But what if you are using the same monitor? On one monitor it must be fixed right? Well, the answer is yes and no. This is where the impact of screen resolution comes into play. Yes, if you consider just one screen resolution,; and no, if you consider the different resolutions the screen can render in. If you have understood everything about pixels upto this point, then this next part shouldn’t be all that difficult.

640×480, 800×600, 1024×768… You all have heard of these right? If you are a web developer, then you sure must have. These are screen resolutions. Screen resolutions are just representations of the size of the virtual matrix that the graphics unit gets to work with. Think of it as the size of a canvas that a painter chooses before painting. The painter can paint within that area, but his painting can’t go beyond the boundaries of the canvas. It’s the same case with the graphics unit and screen resolutions. If your screen resolution is 1024×768, that’s the only area that can be drawn to, and that’s the only area that’ll be visible on screen (stretched to the screen boundaries of course).

Wow! I can hear you saying:

“So that’s the meaning of display resolution under my display settings!”

Yup! That’s what display resolution means. You are specifying the size of the canvas on which your computer will draw.

“So why do things appear larger when I am on a lower resolution and smaller when I am on a greater resolution?”

Hehe.. I was just waiting for you to ask that question. You already know the answer, it’s just that you haven’t tried unlocking it yourself. To start looking for the answer we’ll start with the 20px box example at two different resolutions. Look at the image below.

For the graphics processor it’s just a matter of filling in the dots. For it the 20px box at 640×480 is the same as the 20px box at 1024×768 i.e. the same number of dots to fill in both cases. The only difference lies in the total number of dots available to fill. Then why the contrast in size on screen? Well it’s just that. The difference is seen after it gets rendered on the screen. As I said before, you already know the answer, the monitor stretches the canvas given by the GPU (Graphics Processing Unit) to fit onto the boundaries of the screen. Look at the overlay of both screens in the image I have prepared below.

This image represents the stretching applied by the monitor to the two resolutions in consideration, and overlaid for comparison. The red box is the one at 1024×768 and the green box is the one at 640×480. The red box is exactly 2×2 blocks. The green box is more than 2×2 but less than 3×3 blocks. If you want exact figures then the box at 640×480 is exactly 2.56 times bigger than the box at 1024×768. This is in terms of real world physical size of course, because both boxes are 20px x 20px in terms of pixel sizes. How did I arrive at the exact figure of 2.56? Simple. Divide the ratio of the resolutions.

1024×768 / 640×480 = 1.6×1.6 = 2.56

Having a headache? Ok. Enough with the number crunching. But the point is, after all this you know exactly what is meant by a pixel. This is important, because when I write about how the iPhone retina display works, your concept must be strong. Well that article is for another time. So now, on we go with the pixel again. What?! There’s more left? Hold your horses. There’s not much left actually. The fact is that we haven’t yet applied this unit to CSS, have we? In fact, you don’t even need to worry about different resolutions and all. Just read through with pure CSS in mind.

Considering that you have gone through Part 1 of this series, this’ll get over in a jiffy. We’ll start with the basic example first.

.Font16 {
    font-size: 16px;
}

.Font24 {
    font-size: 24px;
}

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

Quite simple! The first “Hello world!” will display in 16px while the second one will display in 24px.

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

In this case, the inner div gets the font-size of 24px. Therefore “Hello world!” will display in 24px font size.

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

What’s the answer? 16px? Incorrect. How? Let’s recall what I explained in Part 1.

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.

From the list of CSS classes I defined, “Font24” has been defined after “Font16”. So 24px takes precedence and is the correct answer. Get this concept drilled in your mind because I may not repeat it in the future parts of this series. Now answer the next one.

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

What did you get? 24px? Wrong again. Look closely at the div that encloses “Hello world!”. How many CSS classes are applied to it? Two classes? Three classes? No. Only one CSS class has been applied and that is “Font16”. So “Hello world!” renders in 16px as there’s no conflicting class that overrides it. Now a last one before I wrap this up.

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

What did you get? 24px? Well, this time you are absolutely correct. This should mop up the CSS concept for you. As for pixels, I hope with today’s article I was atleast able to make you more aware of it.

Alright! Take a deep breath. This marks the end of part 2 of the series. If you have any questions you are welcome to post in the comments. I hope you liked my article. If you did, please share it using the share buttons below and do leave feedback. It’ll help me improve my articles in the future. See you until my next article. Enjoy!