CSS Units & Sizes Tutorial for Beginners

In this CSS units and sizes tutorial for beginners, you will learn about the common units of measurement used in CSS including px, rem, em, ch, vw, vh and % for setting sizes in your web pages.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Units & Sizes Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(00:51) Many CSS units to choose from
(01:27) Absolute units - pixels
(02:26) Where NOT to use an absolute value
(03:49) Where you can use an absolute value
(04:28) Relative units - percent
(07:16) rem units
(09:34) rem vs em units
(10:50) When to use em units
(12:43) ch units
(13:44) Default browser styles
(15:37) CSS Reset
(16:21) Viewport units - vw and vh
(17:35) When vw units can cause a problem
(19:52) A good use case for vh units

⚙ Web Dev Tools:

📚 References:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about CSS Units and Sizes for beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #units #tutorial

[nikolov]

(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.

[tylerengland]

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!

[niranjan]

You are the best teacher I have ever seen man! Keep up with the good work

[Grihlo]

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!

[hadibq]

Dave, your teaching skills are outstanding! TY for your sharing!

[godsgracedigital]

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

[prayashansa]

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.

[GabrielSouza-yyrq]

I always enjoy your classes. Top quality!

[darkraven]

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

[fairytail]

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

[elvispontes]

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

[ChristiaanKoppelaar]

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

[mailsiraj]

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.

[sumedhux]

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

[destinybarber]

Your tutorials are so helpful, thank you!!!

[samirsamir]

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

[hayksargsyan]

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!

[emirr_yilmazz]

Hello, thanks for this amazing video!

[sonamohialdin]

Very useful CSS series clear explanation thank you

[CTILET]

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