Fish's Absolute Beginners Guide To Units

Link to article: Fish's Absolute Beginners Guide To Units.

#page-title{display:none}
body{overflow-x:hidden}

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border: 10px solid pink;width: fit-content

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

width: 600px;background-color: chartreuse;

```
background-color:green;color:white
```

background-color:green;color:white;padding:0 5px

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
font-size:2em
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
width:80%;background-color:yellow
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
width:20vw;background-color:yellow
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
font-size: max(20px, 3rem, 1vw)
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
font-size: min(20px, 10vw)
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
font-size:clamp(1.5rem, 10vw, 3rem)
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

width: calc(100% - 30px);background-color: yellow;

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

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

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

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

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

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

```
margin:400px
```

(none)

[[include :scp-wiki:component:toggle-sidebar]]
[[module css]]
#page-title{display:none}
body{overflow-x:hidden}
[[/module]]
[[>]]
[[module rate]]
[[/>]]
[[include :scp-wiki:component:author-label-source start=--
|name=Fish^12]]
Fourth essay. And this is my [http://scp-wiki.wikidot.com/hotfish| Author Page]!
[[include :scp-wiki:component:author-label-source end=--]]

Hey kid.

I’m [[*user 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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.pixelMeasurements {
@@ @@ @@ @@ border: 10px solid pink;
@@ @@ @@ @@ width: fit-content;
}

[[/div]]
@@ @@
[[div style="border: 10px solid pink;width: fit-content"]]

This is a border with a 10px solid pink border.

[[/div]]

{{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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.badBoyBox {
@@ @@ @@ @@ width: 600px;
@@ @@ @@ @@ background-color: chartreuse;
}

[[/div]]

[[div style="width: 600px;background-color: chartreuse;"]]

I'm a long boy!

[[/div]]

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.

[[span style="background-color:green;color:white"]]Zero Padding[[/span]] vs. [[span style="background-color:green;color:white;padding:0 5px"]]Some Padding[[/span]]

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}}.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.emBoss {
@@ @@ @@ @@ font-size: 2em;
}

[[/div]]
[[div style="font-size:2em"]]
I'm big text!
[[/div]]

{{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-size^^tm^^. 

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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.percentGrowth {
@@ @@ @@ @@ width: 80%;
}

[[/div]]
[[div style="width:80%;background-color:yellow"]]
I'm only 80% of the way there.
[[/div]]

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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.percentGrowth {
@@ @@ @@ @@ width: 20vw;
}

[[/div]]
[[div style="width:20vw;background-color:yellow"]]
I'm weird.
[[/div]]

{{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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.maxVerstappen {
@@ @@ @@ @@ font-size: max(3rem, 1vw);
}

[[/div]]
[[div style="font-size: max(20px, 3rem, 1vw)"]]
Look at how big I am...
[[/div]]

{{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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.maxVerstappen {
@@ @@ @@ @@ font-size: min(20px, 10vw);
}

[[/div]]
[[div style="font-size: min(20px, 10vw)"]]
Look at how small I am...
[[/div]]

{{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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.percentGrowth {
@@ @@ @@ @@ font-size: clamp(1.5rem, 10vw, 3rem);
}

[[/div]]
[[div style="font-size:clamp(1.5rem, 10vw, 3rem)"]]
Wowowowow.
[[/div]]

{{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 [https://www.marcbacon.com/tools/clamp-calculator/ Clamp Calculator]. 

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.percentGrowth {
@@ @@ @@ @@ width: calc(100% - 30px);
@@ @@ @@ @@ background-color: yellow;
}

[[/div]]
[[div style="width: calc(100% - 30px);background-color: yellow;"]]
Neato.
[[/div]]

{{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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.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;
}

[[/div]]

@@ @@

[[div style="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"]]
[[/div]]

I really enjoy clip-path; if you want to mess around with it, try using [https://bennettfeely.com/clippy/ 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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.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;
}

[[/div]]

@@ @@

[[div style="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"]]
[[/div]]

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).

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.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;
}

[[/div]]

@@ @@

[[div style="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"]]
[[/div]]

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 [https://scp-wiki.wikidot.com/theme:shoebill 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.

[[div style="margin:400px"]]
[[/div]]

[[include :scp-wiki:component:license-box]]
[[include :scp-wiki:component:license-box-end]]

Fish's Absolute Beginners Guide To Units

Module Styles

Inline Styles

Includes

CSS Classes

Page Source