When in school, you probably had an angry physics teacher at one point. You wrote down the answer to the question: “2”. They wrote back “2 what? Kilogram? Joules? Seconds? Don’t forget your units!”
The same is true for CSS. Something that trips up newcomers is the fact that they can’t just write font-size: 10;, with no unit. The browser doesn’t know what to do! 10 what? Meters? Pixels? Elephants?
And when CSS doesn’t understand you, it just pretends the rule doesn’t exist. It won’t crash; it will just ignore it.
Numerical Units
In other words: any numerical value in CSS needs to have a unit. This unit is pushed against the number, with no space in-between.
Except for 0, because zero is always zero, regardless of the unit! And a few other CSS properties that use numbers as an index or ratio, which needs no unit. I’ll explain when we get there.
A huge part of design is about the dimensions and placement of things. Hence, most of your CSS will involve some number or length.
It provides several different units to express yourself.
Absolute Units
These are always the same size, no matter their environment (the device used, the screen size, …).
| Unit | Description |
|---|---|
px | One pixel. |
pt | One point. Common in print media, which has a higher resolution. (So one point is bigger than one pixel.) |
incmmm | One inch, centimeter or millimeter. Useful if page is supposed to be printed. |
This units are pretty useless on a web page. You want the page to be responsive! If you wanted the layout completely fixed, you would’ve just made an image.
If you intend to print it, however, you really want these units. Because a paper has a fixed size and you want everything to be in exactly the right place.
My latest published novels were all created as a website first, then turned into PDF/EPUB. The CSS units above are crucial to setting the right page size and element dimensions for a consistent output.
Relative Units
Instead, you want the relative units. These automatically scale based on the size of its (parent) element. Set a nice value once, and you’re guaranteed that it works on other screens.
| Unit | Description |
|---|---|
em | One em is equal to the font size of this element. |
rem | One rem is equal to the font size of the root element of the page. |
ex | One ex is equal to the x-height of the font in this element. (Roughly speaking, it’s equal to the height of your letters, instead of the width.) |
% | Hundred percent means this property is identical to the property’s value in its parent element. (100% width means it has the same width as its parent.) |
The common approach is to set a good fixed font-size for your major elements (in px, yes). Then use relative units for everything below that, so they automatically scale based on that. To adapt your whole layout, you merely need to change one or two font-size properties near the top.
Also, percentages are special. There are two ways to write them.
- The common way: a percentage with the
%unit (such as100%) - The math way: a number with no unit. In this case,
1equals100%. (So0.5means50%, and so on.)
Viewport Units
The relative units all depend on its own (parent) element. But the thing that forces websites to be responsive is the fact that screen size differs between devices!
So, we also have a set of units that scale based on the size of the browser window (or “viewport”).
| Unit | Description |
|---|---|
vw | Hundred vw is equal to the viewport width. |
vh | Hundred vh is equal to the viewport height. |
vmin | Hundred vmin is equal to the viewport’s smallest dimension. |
vmax | Hundred vmax is equal to the viewport’s biggest dimension. |
Most websites rely heavily on text, which is why relative units are usually preferred. However, there are certainly situations in which you’d reach for viewport units. (Such as a layout that mostly relies on images or video, not text.)
About sharpness
Even though you can define any size in CSS, as precise as you want, this doesn’t mean a device can display it. If you set something to 0.5px, for example, the browser will just round it to the nearest pixel. (It will probably display 1 pixel, but it might be 0 in other situations.)
It can’t display half a pixel! A single pixel is the smallest possible unit of a screen.
Be aware of this.
- Pick values that land precisely on (or near) whole pixel values.
- Don’t pick values that are smaller than a single pixel.
- If you find your design lacking sharpness (looking just a little blurry), opt for the absolute
pxunit to set something to a precise value.
Color
The second huge part of any design is color. This is so important and versatile, however, that I dedicate the entirety of the next chapter to it!
URLs
The third common element of any design is the usage of images (or external media in general). To link these, use the syntax url(/actual/url.png).
Other values
Any other values are usually custom ones, only usable with one specific property.
The visibility property can take the value hidden. No other property can use that value!
You will learn the custom values as you learn the properties to which they belong. Usually though, as my example illustrates, these are named in a very straightforward way. Most values can be understood just by reading them once.
Now, let’s go to the next chapter and learn all about color!
Want to support me?
Buy one of my projects. You get something nice, I get something nice.
Donate through a popular platform using the link below.
Simply giving feedback or spreading the word is also worth a lot.