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: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
(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.
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!
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!
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.
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.
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!
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😁👍👍
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 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,
Just to make sure I understood the reason for the horizontal scrollbar : width: 100vw; does not take into account the extra vertical scrollbar which added itself after the full width of the viewport (100vw) and so, to be able to "see it", it creates a horicontal scrollbar, like if there was an overflow of text? And the reason the width: 100% does not create the horizontal scrollbar is because it takes into account as part of the 100% the extra content/vertical scrollbar and hence it does not consider there is actually an overflow in this case? Thanks
It's been over a year, so I don't remember my exact examples without watching myself. That said, if you remove everything inside your HTML body tag - an empty page - the body element still has browser applied margins. In Chrome, it is 8px on all sides. You can follow along with this example. Applying width: 100% or 100vw by itself will NOT create a horizontal scrollbar on the page. However, as soon as you apply a height of 100vh, you trigger a vertical scrollbar. The addition of the vertical scrollbar now makes the width apply a scrollbar because the full width is larger than what is displayed thanks to the vertical scrollbar. I have a video that is dedicated to all of this as well: ua-cam.com/video/dpuKVjX6BJ8/v-deo.html
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. 🚀
![Lp. Сердце Вселенной #1 НАЧАЛО ПУТЕШЕСТВИЯ [Новый сезон] • Майнкрафт](http://i.ytimg.com/vi/380Q7gLWGvk/mqdefault.jpg)
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: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
(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.
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!
That's great to hear! Thank you for letting me know, Tyler! 💯
You are the best teacher I have ever seen man! Keep up with the good work
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!
Great to hear, Grigory! 💯 I'm glad I could help!
Dave, your teaching skills are outstanding! TY for your sharing!
Thank you!
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
Glad to help! 🚀
Such a technical Teacher ♥️
Hope your Channel grow at a high speed.
Thank you! 🚀
@@DaveGrayTeachesCode My pleasure 🚀
I always enjoy your classes. Top quality!
Happy to hear that!
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.
Glad to hear that!
Sir, you are a wonderful teacher. I salute you.
Thanks a lot for sharing a great content!!!!! You are a great teacher!
You're very welcome!
Thank you so much for this brilliant course. Every day I learn something new.
Great to hear!
thank you Dave Gray❤❤
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.
Your tutorials are so helpful, thank you!!!
Glad you like them!
this really great tutorial, you have great teaching skills, love your videos🙏
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!
WAW ! Top quality Content ! Thank you for such great channel !
Very useful CSS series clear explanation thank you
You're welcome, Sona!
Thanks Dave ! Amazing video.
You're welcome!
Thank you, Dave
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😁👍👍
Thank you - I always appreciate your support! 💯🚀
Hello, thanks for this amazing video!
thank you
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,
Thanks Ahmad! I always enjoy your feedback my friend 🙏💯
@@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,
Just to make sure I understood the reason for the horizontal scrollbar : width: 100vw; does not take into account the extra vertical scrollbar which added itself after the full width of the viewport (100vw) and so, to be able to "see it", it creates a horicontal scrollbar, like if there was an overflow of text? And the reason the width: 100% does not create the horizontal scrollbar is because it takes into account as part of the 100% the extra content/vertical scrollbar and hence it does not consider there is actually an overflow in this case? Thanks
It's been over a year, so I don't remember my exact examples without watching myself. That said, if you remove everything inside your HTML body tag - an empty page - the body element still has browser applied margins. In Chrome, it is 8px on all sides. You can follow along with this example. Applying width: 100% or 100vw by itself will NOT create a horizontal scrollbar on the page. However, as soon as you apply a height of 100vh, you trigger a vertical scrollbar. The addition of the vertical scrollbar now makes the width apply a scrollbar because the full width is larger than what is displayed thanks to the vertical scrollbar. I have a video that is dedicated to all of this as well: ua-cam.com/video/dpuKVjX6BJ8/v-deo.html
Please what material icon do you use for your vs code?
done
revise when vm units can cause problems + default browser styles + good use case for vh☑✅
Awesome teacher!
Thank you! 😃
UNBELIEVABLY ENLIGHTENING
Glad to hear that!
Thank you!
You're welcome!
great tutorial keep going
Thanks, will do!
Thanks! If the site layout is in pixels, how do you convert pixels to em, rem? Can it be automated?
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. 🚀
What up Dave gray Do You upload the Bootstrap tutorial ধন্যবাদ
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.
@@DaveGrayTeachesCode ok Thank you
Thnks sir ❤️
Welcome! 💯
@@DaveGrayTeachesCode sir plz upload all css videos...
And thank you so much..you are osm...!! ❤️
@@frostyfreezemovies thank you. I am still creating them. One or two per week until the series is completed.
@@DaveGrayTeachesCode sir i want to ask something can i ??
Set Seed on 1.25x
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;
}