CSS Values and Units¶

CSS length values come in many different units for measuring values

Absolute Units¶

px is the unit for pixels, e.g.:

p {
  margin: 5px;
  padding: 10px;
}

this sets the margin for p elements to be 5 pixels wide, and the padding to be 10 pixels

pixels are an example of absolute units, e.g. 5px is always the same size no matter the context

other examples of absolute CSS units include

Absolute Unit Name	Meaning
`px`	pixels (1/96 of an inch)
`cm`	centimeters
`mm`	millimeters
`q`	1/4 of a millimeter
`in`	inches
`pt`	points (1/72 of an inch)
`pc`	picas (12 points)

units like pt and pc are not common in everyday life, but instead they come from the world of typography

CSS Pixels vs Physical Screen Pixels¶

there is a confusion with the term “pixel” that is worth exploring

there are at least two different notions of pixels

CSS pixels, i.e. the unit of measurement called px
a physical screen pixel on an ordinary computer screen (e.g. a laptop or tablet screen)

a CSS pixel is defined as 1/96 of an inch, at least for high-resolution screens, and and printed pages

the size of a physical screen pixel depends on the dimensions of the screen and its size

physical pixels could have almost any size, from tiny to huge

for some screens, it might not be possible to display something that is only a few px thick

in general, absolute CSS measurements (like in or cm) will not necessarily be exactly the same on all screens

Physical Pixels¶

in general, physical pixels are the smallest parts of raster images

raster images are rectangular arrays of “points of color”

these points of color are called pixels

for example, if we use 0 to mean black and 1 to mean white, this is a 14x4 raster image e.g.:

01111101000001
00010000100010
00010000010100
00010000001000

if we display this on an ordinary computer screen (such as on a laptop, tablet, and desktop computer), then each 0 and 1 corresponds to 1 pixel

note that on real screens we must take into account both the size of individual pixels and the distance between them, e.g. here are the same pixels as above with more separation:

1 1 1 1 1 0 1 0 0 0 0 0 1
0 0 1 0 0 0 0 1 0 0 0 1 0
0 0 1 0 0 0 0 0 1 0 1 0 0
0 0 1 0 0 0 0 0 0 1 0 0 0

or even more separation:

1  1  1  1  1  0  1  0  0  0  0  0  1

0  0  1  0  0  0  0  1  0  0  0  1  0

0  0  1  0  0  0  0  0  1  0  1  0  0

0  0  1  0  0  0  0  0  0  1  0  0  0

when we talk about the resolution of a computer screen, we usually talk about how many pixels per inch, or PPI, it has

PPI is a measure of pixel density, and it can be calculated with this formula

\[d_p = \sqrt{w^2_p + h^2_p}\]\[\textrm{PPI} = \frac{d_p}{d_i}\]

where:

\(d_p\) is the diagonal resolution of the screen (in pixels)
\(w_p\) is the screen width in pixels
\(h_p\) is the screen height in pixels
\(d_i\) is the diagonal length of the screen (in inches)

as you can see from the formula, pixel density depends upon both the number of pixels and the size of the screen

here are some interesting examples

iPhone 6 Plus display: 1,920 x 1,080; 401 PPI
27-inch iMac with 5K Retina Display: 5,120 x 2,880; 218 PPI
Surface Pro 4 display: 2,736 x 1,824; 267 PPI

the iMac clearly has more pixels than the iPhone, and so can display larger images on the screen

but the iPhone has greater PPI, so if you get very close to the screen it will look clearer than the iMac screen

a “problem” with high PPI devices is that they can accurately render text that is physically very small, and thus can be harder to read than lower quality displays!

Vector Graphics¶

almost all the digital images we deal with are raster images

which means they consist of rectangles of pixels

where each pixel is given a different color

but another way to draw images is to use vector graphics

with vector graphics, you specify the coordinates of points, and then draw lines, or other shapes, between them

a big advantage of vector graphics over pixel-based graphics is that when you zoom in on a vector graphics image you don’t see jagged edges (pixelation) — the vector graphics always look smooth

for example, SVG is a vector graphics format that is quite popular

SVG uses XML to specify images, e.g.:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
  <circle cx="125" cy="125" r="75" fill="orange" />
  <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>

notice there are no pixels in this image — just descriptions of what should be drawn, and where

another interesting example of vector graphics is the Vectrex video game system, that used single-color vector graphics to make smooth and distinctive graphics

Relative Units¶

relative units, such as 4em change in size according to the size of the current font

for example, the em unit is the width of the uppercase M in the current font

the default font size for most web browsers is 16 pixels, but this could change if you change the font

em is the most commonly used relative unit, but there are others

Relative Unit Name	Meaning
`em`	width of a uppercase M
`ex`	height of a lowercase x
`ch`	width of the number 0
`rem`	root `em`: always width of the default base `font-size`
`vw`	1/100 width of the viewport
`vh`	1/100 width of the viewport

Percentages¶

percentages are a very useful unit

for instance, you can specify the width of an element to be a percentage of a parent elements container:

<div id="a">Fixed width layout with pixels</div>
<div id="b">Liquid layout with percentages</div>

div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

#a {
  background-color: red;
  width: 650px;
}

#b {
  background-color: blue;
  width: 75%;
}

the #a div is 650px, which is a fixed length, and so if your browser window is too narrow it will go off the edge of the screen

the #b div will be 75% of the width even if you re-size your browser window

a liquid layout is a web page layout that automatically re-sizes itself to look good on a variety of different screen sizes

liquid layouts are generally harder to design and need a lot more testing to make sure they look good on many different screen sizes

a fixed layout remains the same size no matter the size of the browser window

fixed layouts are often easier to design than liquid layouts

in traditional visual design in things like newspapers, magazines, and posters, the design is all fixed layout

Table Of Contents

Previous topic

Next topic