CSS Units (CSS Lengths: rems, ems, pixels, percents, and more)

What is the difference between ems and rems? When should I use pixels or percentages? How does vmin and vh work? How long is a piece of string?

All these questions and more, Let's talk about CSS units.

- - -

Percent - 0:57
Viewport Width & height - 3:01
Viewport Min & Max - 4:15
EX & CH - 6:08
EM's & REM's - 8:44
Absolute lengths: 13:28
Pixels! - 14:52

- - -

[muhammad-asad]

Having above 4 years of teaching experience, I still view tutorials to learn a bit more, gain perspective and benefit from teaching styles. In every single way, I can say, Awesome!

Thanks ; )

[Selrond]

I love such types of tutorial, when you are only focusing on one area/css property/something and explain it, show practical applications etc. Great!

[hainesse]

Fantastic video. I love your project, tutorial and explanatory videos - they teach the concepts way better than any other online resource.

Side note: Have you considered posing challenges to your audience like hackathons do? Give out a concept or parameter and then you choose your favorite few to showcase? An idea I'd participate in. You could give out assets for them to work with depending on the challenge/parameter.

[afternoonsunjeans]

i have a hard time understanding units by default so i was very glad discovering this video! youre explaining the concept of units in css from the ground up and in a really simple, easy way so i was able to understand it finally!!!! a lot of these units, like inches or pixels, are kinda unfamiliar to me but i can look them up in depth by myself now without breaking out in sweats that i dont understand anything at all about it by default. thank you a lot! <3

[Dev_Manuels]

well detailed explanation, I love the fact that he went straight to the point and explained everything in a really amazing period of time.
doesn't feel like I wasted any time watching this video.
thanks really appreciate it.

[hanchiang]

I discovered your video by luck and I am so grateful for your amazing knowledge and tips you have shared. I just started learning the basics of front end web development.
The part about child width 100% exceeding parent container is one of the things I have problems with.
I recently learned that using width: auto is better choice than using width: 100% as the width of the content will be automatically adjusted after subtracting the margin, border and padding, and the content will still be in the container.

[aakashnd]

Your expression was awesome, when telling "em's in

[danielserrano]

Love your videos. I'm enrolled in a back-end heavy coding bootcamp right now, so your CSS expertise has been a great resource. I'm broke at the moment (long bootcamp hours don't leave time for employment) but when I'm in the working world of tech I'll definitely be joining your patreon community.

[shando_tube]

Love how you give us the ability to skip right to what we need to know <3

[datamiljo]

Travis showed the browser compataz in his personal website design videos! How sweet CSS breakdown is awesome !

[coolmaroo]

He literally is the only person that made me laugh in any coding tutorial video hahaha. Great job loved the way you explain things keep doing what you doing mate! 👍👍👍

[vasudhadixit]

I was struggling with the css units. Thank you for classifying them.

[JavierRiverapr]

Quite the helpful video, well organized and focused. Your presentation skill level has skyrocketed, Travis!

[kitrodriguez]

I discovered rem by myself today ❤ Was able to get my login to be responsive :)

[desireeewing]

em in em's 😆 Love it. Thank you so much for this video!

[brianriback]

I'm really so grateful for your help. I have learned so much from you. When I can afford it, I look forward to becoming a patron.

[Ekitchi]

note about em:
width: 1em //refers to the current element font size, NOT the parent's

font-size: 1em // refers to the parent's font-size

In short em refer to the parent's font-size only when used to define font-size. In all other cases, it refers to the current element's font-size.

also pixels are not in reference to device pixels. They are strictly equivalent to the other absolute measurements.
1in = 96px on all devices

[derekmorash]

This cleared up a lot for me, thanks Travis!
PS. I love seeing my name on the patron list every time, makes me feel special :)

[stevento]

Wow you're a mind reader Travis! I thought about asking you to do a video on these things and now BAM! It's here! :D And this is a great video too! :)

[DoDisturbedTv]

Travis thank you for this video.I have wanted to know the differance of these for a while and I never understood it from online resources. I'm going to watch it later.