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

Подписаться 353 тыс.

Просмотров 168 тыс.

50% 1

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.
Patrons get the files here: / css-units-css-3563073
- - -
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
- - -
This video was sponsored by the DevTips Patron Community - / devtips
Listen to Travis' Podcast - www.travandlos.com/
Get awesomeness emailed to you every thursday - travisneilson.com/notes
You should follow DevTips on Twitter - / devtipsshow

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 239

@muhammad-asad 5 лет назад

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

@hainesse 8 лет назад

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.

@Dev_Manuels 3 года назад

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.

@stevento8038 8 лет назад

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! :)

@afternoonsunjeans9180 2 года назад

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!

@vasudhadixit538 4 года назад

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

@JavierRiverapr 8 лет назад

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

@OfficialDevTips 8 лет назад

That's quite a compliment! Thanks Javier :)

@shando_tube 7 лет назад

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

@Selrond 8 лет назад

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!

@OfficialDevTips 8 лет назад

Awesome!! Glad you liked it!

@datamiljo 8 лет назад

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

@DameDiabolique 8 лет назад

This really helped me understand rems a lot better. Thanks!

@mcolynuck 8 лет назад

Another excellent informational video! Will reference this one for sure in the future.

@yourbrainoncode1899 8 лет назад

Sick! This is a great video I'll be referencing later for sure. Thanks Travis!

@OfficialDevTips 8 лет назад

Awesome!

@cool4maroo 6 лет назад

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! 👍👍👍

@samyakjain7300 7 лет назад

A heap of essential knowledge! Thanks a ton Travis!

@brianriback6285 7 лет назад

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.

@bool2max 8 лет назад

Your videos rock. You explain things so good. Keep up the good work, appreciate it! :D

@derekmorash 8 лет назад

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

@OfficialDevTips 8 лет назад

Haha! nice! You are special!

@danielserrano525 8 лет назад

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.

@OfficialDevTips 8 лет назад

Awesome Daniel, look forward to having you join us! :)

@hanchiang9532 8 лет назад

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.

@rendrap 6 лет назад

Crystal clear explanation, good stuff!

@schardijnvideos 8 лет назад

Thank you for this very clear video explanation ! It helped me to understand issues that I am working on.

@OfficialDevTips 8 лет назад

Fantastic!!

@ZaffaMan91 8 лет назад

Thank you for this video Travis, it was extremely informative! I never really understood 'rems' and the difference with 'ems', but they seem pretty useful for responsive grids, I'll start using them more! Keep on hacking.

@OfficialDevTips 8 лет назад

Fantastic! I'm glad it was helpful!!

@hyenaskate 5 лет назад

Thanks!! This video works perfectly with attempting to code your own grid system.

@realjoker1568 8 лет назад

Fantastic video, I liked especially the organisation in relative/absolute.

@DoDisturbedTv 8 лет назад

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.

@OfficialDevTips 8 лет назад

+Dodisturbedtv Awesome. hope you like it!

@helenashatalova7828 4 года назад

Thanks for your video. It's very useful and easy to understand! You rock'n'roll 🤟

@yasaman4397 7 лет назад

Great video and explanations.Thank you so much!

@mysticsilent 8 лет назад

Great video Travis!

@OfficialDevTips 8 лет назад

+Dirk van Lierop Thanks!

@treshi 7 лет назад

Thanks for this, this makes it all clear now, thanks a lot!

@kootahaitoo 6 лет назад

Beautifully explained!

@metanoia1122 5 лет назад

What a fantastic teacher! Thank you so much for this.

@agbonikaamos9686 8 лет назад

thanks a lot! Mr Travis,i just learnt a lot.

@intrnationldarkskies 8 лет назад

what a great approach :-) all nice and tidy under one roof

@OfficialDevTips 8 лет назад

+intrnationldarkskies yay!

@willbradenal 8 лет назад

Nice explanation! I learned something about rem and em that I didn't know!

@OfficialDevTips 8 лет назад

Glad you liked the video!

@daveskye 8 лет назад

Great Video Especially useful to me as I work with Rocket Theme software including Gantry 5, which now used Rems to set the media query widths.

@OfficialDevTips 8 лет назад

oh, cool!!

@desireeewing8113 Год назад

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

@muhammadumer2011 5 лет назад

Excellent tutorial bro... thanks

@kenguru58 5 лет назад

Great video! Thank you very much!

@marczenkner9667 7 лет назад

Great and clear. Thanks!

@crickster7903 6 лет назад

Bob Ross of web development! :D Thank you so much for this video

@Robstephens_digital_marketing 5 лет назад

Great tutorial.. I sometimes have issues with keeping my layouts intact when going to really high screen resolutions. Would you recommend % or VW/VH as a unit measure for layout consistency on various screen resolutions?

@rahulkota9793 7 лет назад

Thank you. It was clear and useful.

@cagriozarpaci1673 7 лет назад

i dont know you will use this for but its very interesting :D man you are awesome

@IosiPratama 6 лет назад

Thanks. Your video solved our problem in here.

@kitrodriguez992 3 года назад

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

@loucascubeddu 7 лет назад

Wooow i used the vmin thing and it is actually very useful to make a width/height work well with a mobile phone and a desktop screen!!

@Waqas4hmed 8 лет назад

Great stuff. Gold video.

@OfficialDevTips 8 лет назад

thanks!

@lornegeddes5583 8 лет назад

Travis, I am on the path to becoming a web developer(Learning so much from you and people you`ve interviewed), Thank you so much for what you are doing, I am definitely going to be your Patreon.

@OfficialDevTips 8 лет назад

Awesome Lorne! All the best on your journey!

@paatskie 8 лет назад

Thanx for this video man!

@OfficialDevTips 8 лет назад

you are welcome!

@pradhanrak91 8 лет назад

Great video! I didn't know about hsla. just googled it! Thanks :D

@OfficialDevTips 8 лет назад

oh yea! That's a fun one

@hay534 8 лет назад

Way to go Travis. I like the 'ex' unit so you can define a min-height for elements that is equivalent of a number o lines perhaps?

@OfficialDevTips 8 лет назад

+Marcus Zanona oooo! Good idea!

@ChrisPlayFit365 7 лет назад

Any {DEV TIPS} shirts on sale ? awesome videos thank you so much for uploading as much as you. You and a few other channels have helped me tremendously with learning and have made it easier to learn. Coding at first can be very overwhelming when you don't have good teachers helping you break the barriers. Thank you.

@MohanadSalah 8 лет назад

Man that is a good video, thnx

@OfficialDevTips 8 лет назад

Great! Glad you liked it!!

@iJamezz 8 лет назад

Great video! Thank you for the information. I've been developing websites since I was 14 and it's now my career, and even I picked up a few things here :) Didn't know that about ex and ch, haha, very interesting.

@dancekinghoseok4608 7 лет назад

iJamezz lies

@aakashnd 8 лет назад

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

@OfficialDevTips 8 лет назад

@leolallana 8 лет назад

I can't even! Haha. Your tuts are awesome man!

@sudeepparchure 8 лет назад

This is awesome........ Thanks a lot.........

@anissoltane1301 5 лет назад

thank you my friend this is a good video quick and soooooooo helpful

@sledzkryspin1649 6 лет назад

beautiful, just beautiful

@ahmedam77 8 лет назад

Amazing video Thanks for your time and efforts What tools are you using to compile sass and live edit your html ?

@OfficialDevTips 8 лет назад

+Ahmed Mahmoud I was using codekit

@ahmedam77 8 лет назад

thanks :)

@kamaboko1 8 лет назад

hsla....cool dude. Nice to see it! Great tut as well!

@OfficialDevTips 8 лет назад

Thanks for watching man :)

@ross.mp3 5 лет назад

"I don't know what you would use this for but it's very interesting" 🤤 5:50 🤷🏻‍♂️😆 Best teacher!

@Gor523 8 лет назад

Good video , thanks man

@Ekitchi0 4 года назад

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

@dpraajz 6 лет назад

Superb !!!

@ChrisMochinskiMusic 2 года назад

“Cap Height.” Great vid!

@rajveersaini84 8 лет назад

Thanks for share tips !!!

@OfficialDevTips 8 лет назад

+rajveer saini yea!

@theyogaguy9423 8 лет назад

dude you are best ,thanx buddy

@happyhuman8549 6 лет назад

NICE VIDEO!

@brcha 8 лет назад

Excellent video. Btw, \em is a TeX unit that found it's way into the CSS. It is based on the width of the "m" character which is the widest of them all. So, while it does translate into "font-width", it is actually based on the width of a character (in theory).

@OfficialDevTips 8 лет назад

That's true typographically. But not in stylesheets. An em is equal to the calculated font-size attribute. But you see this idea in type-design a lot. For example, an "-" is called an "em-dash" because it is the width of an "M" (as opposed to a hyphen, or an en-dash "-")

@brcha 8 лет назад

DevTips Yes, I know it is calculated from the font-size, I just thought to mention the origin of the em unit. Also, font size property of the font actually corresponds to em property of the font (www.w3.org/TR/CSS2/fonts.html#font-size-props).

@ziakash6392 5 лет назад

i saw few of your videos for last 4 or 7 month and didn't liked you to much for some wired i dnt know {maybe your intro seemed wired to me } so i quite watching soon after the intro ,,and today i realized that i was a total idiot to miss this great content ,,, liked the way you play around with the tutorial ,liked it subbed you

@jrrb18 8 лет назад

Finally i see the light. Thanks a lot !! 1+

@Alekobeats 5 лет назад

great video

@schadock 8 лет назад

great video thx

@manishjain295 8 лет назад

Thanks Man!

@OfficialDevTips 8 лет назад

yep!

@jeffjgarrett269 8 лет назад

Great video! However, how do you choose between using % vs rem/em for layout purposes.

@dancekinghoseok4608 7 лет назад

form

@ifthis_ 4 года назад

The comedy though... 09:58 || "ems in ems, ms in ms, M&Ms..." i almost spit my coffee all over my keys man.

@fitfuelplanner 8 лет назад

Yaaaa! I was honestly confused about the units because all responsive design books say to use 'em' like the responsive design book on A List Apart .... I'm probably going to go reread it about now... :)

@OfficialDevTips 8 лет назад

that book is a bit old.

@asenyakimov1605 8 лет назад

Really helpful, thanks a lot. :)

@OfficialDevTips 8 лет назад

+Asen Yakimov You are welcome!

@leticialimacavalcanti 7 лет назад

great video!! =)

@JZSolutions 5 лет назад

Nice explain

@Sam-de2ht 5 лет назад

thanks, you are great

@JoeBob79569 6 лет назад

Nice video. I accidentally used vw for a height last night, very confused for about 20 minutes! I'd like to see a video about where to use these units, I know you kind of already mentioned some examples, but something like: Use pixels for buttons because their size shouldn't change, use vh for landing images, use percent for.. blah blah.. when blah blahing but not when dah dahing, etc.

@happyhuman8549 6 лет назад

meh

@4inShopper 5 лет назад

excellent thank you

@rafikulrahaman3661 3 года назад

Thank you sir..

@rottingroom 8 лет назад

An em is actually the length of the letter m. An en is the length of half an m, or an n.

@Pareshbpatel Год назад

An excellent tutorial on CSS Units. Thanks. {2022-12-22}

@ConnorElsea 8 лет назад

Good video. I've been mostly using em but rem seems like a better choice.

@OfficialDevTips 8 лет назад

Awesome!

@bjrnarildandersen2066 8 лет назад

Hi. First of - Great video! Thumbs up for this. As a student learning this, it is greatly explained. Now for my question: The vw, is it any good for making responsive pages? Looking at your video it kinda seems like it is a good thing. Hope for an answer :-)

@lysun83 6 лет назад

vmin and vmax can be very useful to create a square reference element to position very precisly elements inside it. Using vmin you can create e very consistente max contained square, and then use percentage top and left to position your childs.

@lysun83 6 лет назад

codepen.io/lysz210/pen/jKKPwG

@thebibleproof 4 года назад

So, would it follow to say viewport measurements work best with margins and padding size, maximum widths. And px for font sizes? Very helpful tutorial.

@ReddoX30 6 лет назад

rem is best unit. Because Rem is best girl.

@eatatjoe69 5 лет назад

r/anime is leaking in

@vikramagarwal3349 4 года назад

I love Emilia though !

@praharshsingh2095 4 года назад

DEATH NOTE ?

@isaacg.1185 7 лет назад

Wow very good video

@hessaa1712 4 года назад

aww i need to try them all to see which is good for me :0

@Bravox84 5 лет назад

Thx for the Video. Well, did you use em or rem for font sitze? and, did set a basic front size (html, body) with px? i mean it make no sense to use em / rem if u set a px font-size to the html, body?