ColorCode

Something you end up doing a lot in CSS is deciding how big or small things should be. If only we could do that in real life. Am I right? Am I right? Can I get a Amen?

Sizing and length units are almost unavoidable when writing CSS. It’s a big part of designing web pages.

So how do you specify how big something should be? For example, width and height of a button, thickness of a border, or most commonly, font size. This is huge. I specially want to focus on font size and typography.

Sizing with Pixel Units

A simple way to choose your font size is using pixel units, like in Google Docs or Word, how you can choose the size of your font. You can write:

p {
    font-size: 16px;
}

`px` stands for pixel. You can change this value to any number but as long as you have `px` at the end it will mean pixels.

Pixel is what’s called an absolute unit. Meaning it doesn’t depend on anything, 12 pixels are always 12 pixels (Well, almost always, it depends on some hardware stuff you don’t need to worry about right now).

You can do the same thing for width and height. Say you have a button. I can just say:

button {
    width: 100px;
    height: 50px;
}

Other Absolute Units

Other absolute values are `in` (inch), `cm` (centimeter) or `mm` (millimeter), These are more common for print and not so much digital design, there other absolute units as well but we’re mostly we’re going to be using `px`, pixels.

So those are absolute units.

We also have relative units. They are relative to something else, mostly to the parent’s size. Wait, what? Yeah, they are a little more complicated. Let me explain, in the next video.