CSS Tutorial — Absolute Sizes, px, pt (6/13)

CSS Tutorial — Absolute Sizes, px, pt (6/13)

Something you end up doing a lot in CSS is deciding how big or small things should be. Sizing and length units are almost unavoidable when writing CSS. It’s a big part of designing a page.

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 wanna focus on font size and typography.

A simple way to choose your font size is using pixel units, like in Google Docs or Word how you can choose your size?. You can write font-size: 16px. Which 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 (almost always, depends on some hardware stuff you don’t need to worry about right now).

So pixel unit. You can do the same thing for width and height. Say you have a button. I can just say width: 100px, height: 50px; and booyakasha. It listens and changes!!!

Other absolute values are in (inch), cm (centimeter) or mm (millimeter), I think these are more common for print and not so much digital design, there’s also points and some other ones 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’re a little more complicated. Let me explain, in the next video.

[valentinkhoroshkov]

The best explanation ever, even though I knew that before, stil was interesting to watch and listen. This is the way all tutorials should be. Thanx a lot!

[webgard.]

عالی.. 6 سال گذشته ولی هیچ آموزشی به خوبی کار شما ندیدم انصافا..

[gbxgbxgbx]

So implicating that px is an absolute measure unit, you suggest that px can be converted to for example a real life absolute mm unit? I don't think that px is an absolute measure. px displayed size will vary depending on the display size, thus 1px will not be always the same amount of mm on displays. Doesn't that implicate that px is not an absolute measure?

[ericphong]

Very good and funny videos bring a great sense of entertainment!

[vujic]

I can't stop laughing hahaha and I only watched 15 seconds

[nhipham]

Very good and funny videos bring a great sense of entertainment!