There are many CSS units available - so many that it can get confusing! In this tutorial, we will cover the frequently used CSS units and look at examples of how they are applied to size different HTML elements on your page. We'll also look at some situations where applying a certain size or unit is not a good choice. If you are just getting started with CSS, I suggest going to the start of this CSS for Beginners playlist here: kzread.info/head/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

Thanks Dave! As you suggested in your introduction video I started Free Code Camp recently and I'm currently in the CSS section. Your CSS videos and examples are definitely making things easier for me to understand. Your examples help bring the skills to life. I'm looking forward to the next one!

@DaveGrayTeachesCode

2 жыл бұрын

That's great to hear! Thank you for letting me know, Tyler! 💯

Thanks again for your lessons Dave! I'm trying to learn something new about coding everyday and it's a pleasure with your tutorials. Also I'd like to encourage everybody to write more comments and leave more likes for this amazing content!

@DaveGrayTeachesCode

Жыл бұрын

Great to hear, Grigory! 💯 I'm glad I could help!

Great work Dave am happy to jave come across your tutorial on this platform. Its just exactly what I wanted as i want to learn programming

@DaveGrayTeachesCode

2 жыл бұрын

Glad to help! 🚀

I always enjoy your classes. Top quality!

@DaveGrayTeachesCode

Жыл бұрын

Happy to hear that!

this really great tutorial, you have great teaching skills, love your videos🙏

Sir, you are a wonderful teacher. I salute you.

WAW ! Top quality Content ! Thank you for such great channel !

Thanks a lot for sharing a great content!!!!! You are a great teacher!

@DaveGrayTeachesCode

Жыл бұрын

You're very welcome!

Your tutorials are so helpful, thank you!!!

@DaveGrayTeachesCode

Жыл бұрын

Glad you like them!

thank you Dave Gray❤❤

Hello, thanks for this amazing video!

Thank you so much for this brilliant course. Every day I learn something new.

@DaveGrayTeachesCode

Жыл бұрын

Great to hear!

Thanks Dave ! Amazing video.

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Thank you, Dave

Such a technical Teacher ♥️ Hope your Channel grow at a high speed.

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 🚀

@darkraven4207

2 жыл бұрын

@@DaveGrayTeachesCode My pleasure 🚀

Very useful CSS series clear explanation thank you

@DaveGrayTeachesCode

Жыл бұрын

You're welcome, Sona!

thank you

Awesome teacher!

@DaveGrayTeachesCode

Жыл бұрын

Thank you! 😃

I have been doing front-end development for quite some time and the most annoying thing for me is always that horizontal scroll bar when the content exceeds the view height as I usually set some value to 100vw and to solve that I have to set overflow-x to hidden in the body. Now I know what is happening. Learn something new today. Thanks, you are doing a great job.

@DaveGrayTeachesCode

Жыл бұрын

Glad to hear that!

Dave, thanks for this great lesson - I liked your tips on when to use what very beneficial. Just an info for you, in case you have not heard it before - `em` represents the size of the letter m in print - this was mentioned in the HTML & CSS book by Jon Duckett. Not sure whether it is still true as you also explained that we have `ch` which also represents the width of a character.

great tutorial keep going

@DaveGrayTeachesCode

Жыл бұрын

Thanks, will do!

Thank you!

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

(02:26) Where NOT to use an absolute value Additional tip: Use `rem` units for font sizes in your CSS. When adjusting font sizes based on viewport width, modify the base font size in media queries instead of adjusting each element individually. This ensures consistent and proportional scaling throughout the design.

Dave, when you get to padding, margin, border, box sizing, everthing gets really confusing. Maybe you could take an image to simplify what each of them is before going further. REM and EM's explanation I found very clear. Just sharing some feedback!

Please what material icon do you use for your vs code?

Dave always read all comments and react to them. So don t forget to subscribe, push the like btn and write something uplifting because he deverse it😁👍👍

@DaveGrayTeachesCode

2 жыл бұрын

Thank you - I always appreciate your support! 💯🚀

UNBELIEVABLY ENLIGHTENING

@DaveGrayTeachesCode

Жыл бұрын

Glad to hear that!

Nice and quick, Another use case for absolute units could be for printing purposes when a specific measurements are required in cm, mm or in, Maybe in the future we can print directly from a web browser to a Vinyl cutter / CNC machines so that using absolute units is important I think :) Thanks Dave,

@DaveGrayTeachesCode

2 жыл бұрын

Thanks Ahmad! I always enjoy your feedback my friend 🙏💯

@ahmad-murery

2 жыл бұрын

@@DaveGrayTeachesCode And I always enjoy you videos, you have such a unique teaching style and your contents are structured very well, So thank you and have a nice Day/Evening my good friend,

Thanks! If the site layout is in pixels, how do you convert pixels to em, rem? Can it be automated?

@DaveGrayTeachesCode

2 жыл бұрын

You need to know the root font-size value. If it is not set, the root value is 16px in most browsers. From there, 1rem = root size. 1em is relative to the parent value. I go over all of this in the tutorial, too. 🚀

Thnks sir ❤️

@DaveGrayTeachesCode

2 жыл бұрын

Welcome! 💯

@frostyfreezemovies

2 жыл бұрын

@@DaveGrayTeachesCode sir plz upload all css videos... And thank you so much..you are osm...!! ❤️

@DaveGrayTeachesCode

2 жыл бұрын

@@frostyfreezemovies thank you. I am still creating them. One or two per week until the series is completed.

@frostyfreezemovies

2 жыл бұрын

@@DaveGrayTeachesCode sir i want to ask something can i ??

done revise when vm units can cause problems + default browser styles + good use case for vh☑✅

What up Dave gray Do You upload the Bootstrap tutorial ধন্যবাদ

@DaveGrayTeachesCode

2 жыл бұрын

No bootstrap yet. I want to cover the foundations of CSS in this series before covering a library like Bootstrap or a framework like Tailwind.

@developerashed610

2 жыл бұрын

@@DaveGrayTeachesCode ok Thank you

my reset *, *::before, *::after, :where(:not(, canvas, img, svg, video):not(svg *)) { box-sizing: border-box; margin: 0; padding: 0; display: revert; text-decoration: none; outline: none; border: none; } my font settings html, body { font-size: 62.5%; min-height: -webkit-fill-available; }