CSS unit is a type of data with which we can define measurements, and it looks like this:
max-height: 150px;Alternatively, it could also look like this:
transform: rotate(45deg);There is no space between the number and the unit.
In most cases, the unit isn't required after the number 0 (zero).
There are several types of length units, such as described in the following explanations.
They are dependent on another element's length (usually, a parent element in the DOM) that relates directly to the element in question. When the other element's length changes, the length of the element in question maintains the defined proportion. In other words, there is no need to declare the length of the child element again.
Relative units are always the best way to go if we want to build scalable systems. Setting values in a single element and then modifying that single element to affect the whole system saves a lot of time and many headaches.
The ex suffix stands for an element's x-height. The ex CSS unit refers to the height of lowercase x. This height is dependent on the font. In other words, the heights can be different if we are using Arial than if we are using Verdana, even if the value is the same.
CSS:
.element {
padding: 2ex;
}The ch suffix stands for character. The ch CSS unit refers to the width of the character 0 (zero). This width is dependent on the font. In other words, the widths can be different if we are using Arial than if we are using Verdana, even if the value is the same.
CSS:
.element {
padding: 2ch;
}The em suffix stands for the pronunciation of the letter m, and it represented the width of the lower case m in the print and typography industries. In CSS, the em unit represents a calculation of an element's font-size property.
This unit can be used together with many CSS properties, but the most common use is to define font-size elements.
However, many web designers and developers prefer to use rem units to avoid the inheritance issue em units have in nested elements (3-4 or more levels deep).
CSS:
.element {
font: 1.5em Arial, Helvetica, san-serif;
}The rem suffix stands for the abbreviation of the term root element. The rem CSS unit represents the font size of the root element in a markup document. A markup document is not only an HTML document; it can also be an XML, SVG, or other markup-based document.
Granted that in this guide, we are referring to an HTML document, and since this is the case, the root element is the <html> element.
A very common practice is to set the font size on the <html> element to 62.5%. This way, when we're setting our font sizes for other elements, we can still think in pixels, but write in rem units to maintain the relative font size when scaling up or down our document in our responsive projects.
CSS:
html {
font-size: 62.5%;
}
h1 {
/*It's the same as 22px*/
font-size: 2.2rem;
}The % sign is what it implies, percentage. In CSS em units and percentage units yield the same result. Percentage values, such as any of the other relative units, are dependent on another value, usually that of the parent element.
Like all other relative units, percentages and responsive web design go hand in hand.
CSS:
.element {
margin: 0 1%;
}These units relate to the viewport. If the viewport's dimensions change, the properties using viewport-relative length values adapt to the new dimensions of the view window.
These units are a godsend in my book. They do what we would expect of fonts in a responsive world: enlarge or shrink according to the width or height of the viewport.
Let's check them out.
The vh suffix stands for viewport height. The vh CSS unit relates to the height of the viewport. The value of vh is 1/100th of the height of the viewport.
For example, if we declare the font-size of an element as 1vh, and the browser window is 500px, the font size is then 5px.
CSS:
.element {
font-size: 1vh;
}The vw suffix stands for viewport width. The vw CSS unit relates to the width of the viewport. The value of vw is 1/100th of the width of the viewport.
For example, if we declare the font-size of an element as 1vh, and the browser window is 1400px, the font size is then 14px.
CSS:
.element {
font-size: 1vw;
}The vmin suffix stands for
viewport minimum. The vmin CSS unit relates to the smallest value of the viewport, of either its height or its width. The value of vmin is 1/100th of the side with the smallest length of the viewport.
For example, if we declare the font-size of an element as 1vmin and the browser's viewport is 600 × 800, the font size is then 6px.
CSS:
.element {
font-size: 1vmin;
}The vmax suffix stands for viewport maximum. The vmax CSS unit relates to the largest value of the viewport, of either its height or its width. The value of vmax is 1/100th of the side with the largest length of the viewport.
For example, if we declare the font-size of an element as 1vmax, and the browser's viewport is 600 × 800, the font size is then 8px.
CSS:
.element {
font-size: 1vmax;
}These units represent a physical dimension of an element. Some units in CSS come from the printing world, and although it's not common to use them, it's important to know as much as we can about them.
These types of units relate directly to a physical measurement. They work best when the output environment is known, like in print.
The most used absolute unit is the pixel (px). A pixel is known to be a single dot on a screen. The thing is that there is no industry standard for the size of that dot.
In other words, a pixel in a standard LED/LCD display (for example, a monitor or a TV) has different sizes than a pixel in a high-density screen. Even the pixel sizes between high-density screens are different.
Let's see what each abbreviation means, and at the end of the section, we'll be able to see a single example with all the units.
The px suffix stands for pixel.
CSS:
All the following values represent units that resemble 16px font size, but in different length units.
/*Centimeter*/
.element { font-size: .43cm; }
/*Millimeter*/
.element { font-size: 4.3mm; }
/*Inch*/
.element { font-size: .17in; }
/*Pica*/
.element { font-size: 1pc; }
/*Point*/
.element { font-size: 12pt; }
/*Pixel*/
.element { font-size: 16px; } These units represent angle values.
These units are used whenever we want to rotate an element via the transform property.
Aside from the deg data type, the other angle data type units aren't really that common.
Let's check them out though.
The turn suffix is not an abbreviation; it's the actual word turn. There is one turn in a full circle, so if we're going to make a horizontal rectangle rotate 90 degrees to make it vertical, we would define it as .25turn, because it's ¼th of the complete turn.
CSS:
All the following values represent units that resemble a 90-degree turn of an element but in different angle data types:
/*Degrees*/
.element { transform: rotate(90deg); }
/*Gradians*/
.element { transform: rotate(100grad); }
/*Radians*/
.element { transform: rotate(89.535rad); }
/*Turn*/
.element { transform: rotate(.25turn); }These units represent the screen density of pixels on any given output or device. Unlike relative and absolute units, it's necessary to add the unit to the value 0 (zero).
Whenever we need to consider density screens, resolution units will do the heavy lifting for us. They are used in media queries.
Let's see how they work.
The dpi suffix stands for dots per inch. Screens contain 72 or 96 dpi, whereas a printed document has much larger dpi. 1 inch = 2.54 cm, so 1dpi≈ 0.39dpcm.
The dppx suffix stands for
dots per pixel. 1dppx = 96dpi due to the 1:96 fixed ratio of CSS pixels.
CSS:
/**@2x pixel ratio**/
/*Dots per inch*/
@media (min-resolution: 192dpi) { ... }
/*Dots per centimeter*/
@media (min-resolution: 75.5906dpcm) { ... }
/*Dots per pixel*/
@media (min-resolution: 2dppx) { ... }These units represent the duration of an animation in either seconds or milliseconds.
CSS columns is the most versatile way to fluidly distribute long strings of content while retaining scalability. If the content grows or is reduced, it would automatically reflow in the available space of the declared columns.
Although not necessarily ideal, actual elements such as DIVs can also be distributed in columns with the CSS columns property.
Let's dive in.
The column-count CSS property defines the number of columns of an element, and it looks like this:
column-count:3;
We can use either a number value or the keyword auto.
When we use the auto keyword, we're letting the browser decide how many columns can fit within the available space. This is a very powerful and robust solution for responsive layouts. However, it is required that we declare column-width for this to work.
CSS:
/*Let the browser decide*/
.element {
column-count: auto;
column-width: 200px;
}
/*Specific number of columns*/
.element {
column-count: 3;
}The
column-fill CSS property controls how the content is assigned across columns, and it looks like this:
column-fill: balance;
There are two keywords: auto and balance.
auto: This means that the content is filled sequentially. Basically, as space becomes available, the content will start filling it. This makes the parent container grow vertically by making the columns taller in order to fit the content.balance: This means that the content will be equally distributed in the available columns. For this to work, we need to declare a height on the parent container. This will make sure that the columns are of the specific height as well. The problem with this is that the content will just keep flowing outside the parent container if the parent container becomes too small.
CSS:
/*Balance*/
.element {
column-fill: balance;
column-count: 4;
height: 400px;
}
/*Auto*/
.element {
column-fill: auto;
column-count: 4;
}The column-gap CSS property defines the space between columns. In editorial terms, this space is the "gutter", and it looks like this:
column-gap: 50px;
There are two values: the auto keyword and a length value.
CSS:
/*Auto = 1em*/
.element {
column-gap: auto;
column-count: 4;
}
/*Length value: px or em*/
.element {
column-gap: 50px;
column-count: 4;
}The
column-rule CSS property creates or draws a vertical line that "separates" the columns, and it looks like this:
column-rule: 2px solid black;
We can define three aspects of the column-rule CSS property: the thickness or width; the style, which are the same styles of the border-style property; and color.
The column-rule CSS property is the shorthand of the following properties:
column-rule-width: This can be just a length value (a number), or we can use any of these keywords:thin,medium, orthick.column-rule-style: This can be any of theborder-stylevalues, such asdotted,dashed,inset, and so on.column-rule-color: This is a color defined in any format:HEX,RGB, orHSL. It also supports alpha channel, soRGBaandHSLaare allowed.
CSS:
/*Length, solid line and RGBa*/
.element {
column-gap: auto;
column-count: 4;
column-rule: 2px solid rgba(0, 0, 0, .3);
}
/*Keyword, dotted and color name*/
.element {
column-gap: 50px;
column-count: 4;
column-rule: thick dotted black;
}The
column-rule-color CSS property defines the color of the dividing line between columns.
Colors can be defined in any format: HEX, RGB, or HSL. It also supports alpha channel, so RGBa and HSLa are allowed.
CSS:
.element {
column-rule-color: red;
}The
column-rule-style CSS property defines the style of the dividing line between columns.
It can be any of the border-style values, for example, dotted, dashed, inset, and so on.
CSS:
.element {
column-rule-style: dotted;
}The
column-rule-width CSS property defines the thickness (width) of the dividing line between columns.
It can be just a length value (a number), or we can use any of these keywords: thin, medium, or thick.
CSS:
.element {
column-rule-width: 5px;
}The
column-span CSS property makes an element that's supposed to behave like a column into an element that spans across all columns. The element is still a "column", but it now expands the full width of the columns, like a block element.
There are two values, none and all, which are self-explanatory.
CSS:
.element {
column-span: all;
}Here is a demo in CodePen: http://tiny.cc/column-span
The
column-width CSS property defines the width of the columns.
When we define the width of the columns, the browser will automatically add or remove columns depending on the available space.
For example, if we say our columns are 200px wide and the parent container is 800px, then the browser will include three columns (taking into account the default column-gap of 1em). However, if the container is at least 450px wide, the browser will fit two columns.
CSS:
/*em value*/
.element {
column-width: 10em;
}
/*px value*/
.element {
column-width: 200px;
}The
columns CSS property is the shorthand that we can use to set column-width and column-count.
It can accept either one or two values in the same declaration. The order of the values doesn't matter, but it's a good measure to declare column-width first and column-count second.
CSS:
/*column-width and then column-count*/
.element {
columns: 300px 2;
}