Hey kid.
I’m Fish^12. Wanna learn CSS? This is the fourth installment of my CSS series. Make sure you're properly caught up before reading this guide.
This time, we're going to be talking about units. I swear this will be interesting. Just trust me.
Preface: This guide is intended for beginners. If you know about the different types of CSS units and when to use each, then you can downvote this guide.
MEASURE MY DIH
On top of colors, you will have to deal with a lot of positioning, length, and other mathematical concepts. That's just how it is if you want to make a theme that isn't just a basic palette swap. So let's start with the basics.
.pixelMeasurements {
border: 10px solid pink;
width: fit-content;
}
This is a border with a 10px solid pink border.
px is the only absolute unit. Do note that this unit is not actually accurate to the real world pixel. A higher definition computer can actually depict 1px as multiple pixels. These units are largely perceptual.
Anyways, even though the pixel is very ubiquitous, you should try to avoid using them. It's better to use units that are flexible. For example, look at the following piece of CSS.
.badBoyBox {
width: 600px;
background-color: chartreuse;
}
I'm a long boy!
If you're on a computer or a laptop, this div isn't a big deal. However, if you're on a device that is smaller than 600px in width, then the div is going to be larger than the screen.
Or, in the opposite scenario, if you have a very small div, say, 100px, that will work on mobile. But it will be microscopic on a larger monitor, and that's not good either.
Ultimately, pixels are less desirable for accessibility. You want your formatting to adapt to your users, not the other way around. I generally only use pixels for small things, like adding a few pixels to the left and right padding of a span so that there's a bit more visibility.
Zero Padding vs. Some Padding
Very trivial, but effective.
RELATIVE UNITS
There are a lot of relative units to discuss, all of which have different use cases. Let's start with em and rem.
.emBoss {
font-size: 2em;
}
I'm big text!
em is a relative unit that is equal to the font-size of the element or parent element. In this case, this is twice the size of the body font-size of 15.2px.
This is good for creating proportional formatting based on the font-size. Nested uses of em will compound. For example, if your parent element uses 2em, and your child element uses 2em, then the resulting font-size will be 4em; if your parent element uses 0.9em and your child element uses 0.9em, the resulting font-size will be 0.81em.
Thus, em is useful for superscripts, subscripts, lists, and other elements that are dependent the element's font-sizetm.
Generally speaking, rem is good for consistency across an article. Instead of deriving the length based on the parent element, rem uses the font-size of the root; in most cases, this is the html element. 1rem in the #page-content, the .owindow, and the h1 will all be the same size.
.percentGrowth {
width: 80%;
}
I'm only 80% of the way there.
Percentages is based on the parent element. In this case, the width of this div takes up 80% of the #page-content. Percentages are good for scaling content, same with the next set of units.
.percentGrowth {
width: 20vw;
}
I'm weird.
vw and vh stands for viewport width and viewport height, respectively. They are measured based on the viewer's screen, so 100vw would be the entire width of the screen while 100vh would be the entire height of the screen.
These units of measurements are the most common measurements you will come across and will pretty much be a core part of your CSS toolkit. There are a ton of other units out there with different use cases, but these are the ones you'll generally be using the most.
ADVANCED FUNCTIONS
Now that you know what the main units are, it's time to put them to work.
.maxVerstappen {
font-size: max(3rem, 1vw);
}
Look at how big I am…
max() allows you to set multiple values, after which it will accept the largest value. In this case, the font-size will be 3rem unless 1vw is larger.
.maxVerstappen {
font-size: min(20px, 10vw);
}
Look at how small I am…
min() allows you to set multiple values, after which it will accept the smallest value. In this case, the font-size will be 20px unless 10vw is smaller.
.percentGrowth {
font-size: clamp(1.5rem, 10vw, 3rem);
}
Wowowowow.
clamp is a CSS function that allows you to input a minimum bound and a maximum bound, with a preferred value when falling between the two.
This allows you to resize an element that can grow or shrink based on the size of the viewport. In the above example, the largest the font-size can be is 3rem and the smallest it can be is 1.5rem, where it will smoothly resize between the two values if 10vw falls between 1.5 and 3 rem.
clamp is best used with the Clamp Calculator.
.percentGrowth {
width: calc(100% - 30px);
background-color: yellow;
}
Neato.
calc() is another CSS function that has some very fun applications. For example, under normal circumstances, you can't actually combine different types of units. 100px + 100% wouldn't normally work. calc() helps bridge that gap. Note: Don't forget the spaces here. It will break if you don't have proper spacing.
In support of calc(), there are a host of CSS functions that replicate some arithmetic and geometric processes.
- cos(), sin(), tan(), and all the other trig functions for supporting angles and circles.
- exp() and sqrt() for exponents and radicals.
Chances are, you won't have to use those, but they can be very powerful tools for very specific formatting. For example, if you have to make an angled line within a circle, this is your best bet.
THE SAUCE
Let's put this to good use.
Let's assume we want to make a weird shape. Simple enough.
.weirdShape {
clip-path: polygon(0% 100%, 15% 100%, 15% 15%, 85% 15%, 85% 60%, 100% 60%, 100% 0%, 0% 0%);
background-color: red;
width: 100px;
height: 100px;
}
I really enjoy clip-path; if you want to mess around with it, try using this website. Basically, what it does is cut out a shape from an element. This shape, in particular, is perfectly to scale when it is square.
However, let's say I want this to be stretched across the screen. If I set its width to 100%, this is what would happen.
.weirdShape {
clip-path: polygon(0% 100%, 15% 100%, 15% 15%, 85% 15%, 85% 60%, 100% 60%, 100% 0%, 0% 0%);
background-color: red;
width: 100%;
height: 100px;
}
Ew! I want the shape to be a consistent shape. So the solution here is to convert the percentages into a calculated number. We will change 15% to 15px and 85% to calc(100% - 15px).
.weirdShape {
clip-path: polygon(0% 100%, 15px 100%, 15px 15px, calc(100% - 15px) 15px, calc(100% - 15px) 60%, 100% 60%, 100% 0%, 0% 0%);
background-color: red;
width: 100%;
height: 100px;
}
And there we go! A shape that can adapt to any screen size and maintain its 15px width. In fact, I used this trick when designing the Shoebill Theme, in the .image-block and the #footer.
CONCLUSION
Now you know the power of units. I hope I managed to make this seem as interesting as I promised it was. It's something I have an inordinate fondness for.