It’s programming, mathematics and art!
“Everything you can imagine is real.”
- Pablo Picasso
CSS is fascinating! It is a mixture of programming, mathematics and art as Chris Coyier says. For me, it was just a way to change colours and sizes during the initial days of my tryst with web applications. Those were the days of tables where you aligned your content by creating tables within your HTML page. Scary as hell! But over the years I realised how cool CSS really is. It has become as important as any language in modern web development world.
There is a lot to talk about CSS, but today let’s focus on one thing and look into the different measuring units provided that can be used on HTML elements using CSS. There are about fifteen different CSS units (yo ma boy, we come a long way!) currently supported. Broadly these can be divided into two groups: Absolute units and Relative units. Let’s dive into details.
Absolute units are the ones where the measurement is based on absolute units of measurement, like millimeters or pixels. Here the dimensions of an element do not depend on the dimensions of a parent element.
Pixels (px) : Pixels are the most common and understandable units in CSS. A pixel is a smallest point on the screen. Your screen is made up of a two dimensional array of pixels. If you have a full HD display, you have 1920 pixels width and 1080 pixels height. This is why full HD videos are called 1080p videos. When you assign an HTML element a width and height of say 400px, your element occupies 400 pixels horizontally and 400 pixels vertically on your screen. High resolution screens have a greater pixel density and hence objects appear smaller but sharper.
Points (pt) : Points are units from typography world. A point is roughly 0.35 of a millimeter. These units can be seen in your word processors like Microsoft Word for selecting different font sizes. These units are rarely used in the web world.
Picas (pc) : Picas is also an import from typography world. A pica is equal to twelve points. 1pc = 12pt.
Inches (in) : Inch is equal to 25.4mm. Traditional measurement unit. Can be applied to web as well, but not sure why we would use it!
Centimeters (cm) : Centimeters, we know what they are. 1cm = 10mm. Same thing applied here.
Millimeters (mm) : Well, we have learned the metric system long back, haven’t we? So I am sure you know what this is.
Let take a look into relative units. Relative units are dependent on the dimensions of the parent elements, the dimensions of font-attributes or the dimensions of the viewport. A viewport is the dimension of the screen in which the page is being viewed or the visible area. This varies from device to device. In this age of responsive design, it is important to know the target viewport for any user interface designed using HTML and CSS. Earlier, pages were designed only for Desktop screens. But now when mobile comes into play relative units play a crucial role in UI design.
In pages designed to be responsive across devices, the viewport meta tag provides control over the viewport. Something like here:
This tells the page to take up the width of the device by setting
initial-scale=1.0 sets the initial zoom level. Additionally if you do not want the user to be able to zoom your page you can add the property
user-scalable=no in addition to
initial-scale. Let’s not look into each of the relative units used in CSS.
Percentage (%) : Percentages do what they say. They set the dimension (height or width) to a certain percentage of the parent element. So, if you have a div called
contentwithin a div called
sectionand you say
width: 50%to the
content, it will be half as wide as the
section. Many CSS grid frameworks use percentages to divide a parent element into columns.
Font Sizes (em & rem) : The units em and rem size the elements based on the font sizes. Where em is relative to the font size specified within the parent element, rem always stays with respect to the base font size specified on the page. Let’s assume that we have a base font size of 10px on a page. A div called
sectionwith font size of 12px and child divs
remas follows. The comments in the CSS explain this concept:
Character Size (ex & ch) : These units are a little weird and I have never used them. But I am sure these might have been useful somewhere else they would have no reason to exist. ex refers to the height of the character ‘x’ in a given font. So if you say
height: 2ex;, it means that the height of that particular element is twice the height of the character ‘x’ in the font that’s been used. Similarly, ch refers to the width of the character ‘0’ in the font. Awesome! what else to say?
Viewport Dimensions (vw & vh) : The unit vw and vh stand for viewport width and viewport height respectively. 1vh = 1% of viewport width and 1vh = 1% of viewport height. These units are useful in several scenarios. For example, you want a banner that is stays full screen on any device you just set
Viewport Max (vmax) : The unit vmax is defined as
1vmax = 1vw or 1vh, whichever is larger. This means the size of the element is relative the height or the width of the viewport, whichever is larger.
Viewport Min (vmin) : The unit vmin is defined as
1vmin = 1vw or 1vh, whichever is smaller. This means the size of the element is relative the height or the width of the viewport, whichever is smaller.
Hopefully this has given some insight into the various units used in CSS. While some of these can be a bit confusing in the beginning, practicing these and playing around with them will help in gaining a good understanding of these units. Not all of them are used in everyday projects, but it is good to have knowledge of these to add to your CSS arsenal.