Are you using the right CSS units?

how to pick which css unit to use inwhich circumstance i wish this was aneasy question to answerbut it really is one of those it dependstypes of questions but in this case theit dependsdoes actually depend on some things morethan others so in this video i'm goingto try and come up with the bestgeneralizations that i canbefore we really dive into it i justwant you to remember there isalways an exception to pretty much allof these rules these are just rules ofthumbbut if you're just breaking away fromusing pixels and you aren't sure whichunit you should be using in whatsituationhopefully this video will help you outare you declaring a font size if so youprobably want to go with remrem are like m in that they're relativeunits but in the case ofram relic they are relative to the fontsize of our root element which is ourhtml elementmost of the time that defaults to 16pixels and you might be going well if itis 16 pixels why don't i just use pixelsbutram are better than using pixels becausethey adapt to the user's system andbrowser preferenceswhereas if you use pixels you're goingto lock things in and you can overwritea user's preferencesi'm not going to get into the nittygritty of all of it but if someone istaking the time to change their browsersettings to have something default to 21pixels and you overwrite that withsomething that's really smallbecause you think it looks better i knowif that was me i probably wouldn'tbother sticking aroundone of the reasons people don't likeusing rems is working off a base 16 canbe hardor they don't like that idea now i'vebeen doing it for long enough that i'mactually pretty used to doing itbut if you don't like the idea of doingthat you can actually set the font sizeon your htmlelement to 62.5 and when you do thatit sets the base font size to 10 pixelsand it just makes the math a lot easierthat way if you wantsomething to be 21 pixels you can setthe font size to 2.1 rembecause 2.1 times 10 gives you 21 pixelsnow just earlier i did mention m andwhile i lovem i generally would avoid using them toset font sizesif you really want to know thedifferences or more about m versus ramand the types of issues you can run intowith either one of them i do have avideo that compares the two and showsyou the problems that you can run intoso you can check that outare you setting a width this is actuallyone of the harder ones to answer becausethere are so many different things thatyou might be setting a width onbut i think for the most part apercentage is a nice direction to go onoften coupled with a max width now thereare times also where a viewport widthmight be a good unit to use but it cancause some trouble or some unintendedconsequences so just be careful withviewport widths if you are using themand another unit that a lot of peopledon't know about that could be a reallygood fit is the ch unitin the world of print we have an m unitwhich is the width of a capital letterm but in css the m is equal to the fontsize of an elementso they've given us a new unit the ch sothis is roughly equal to the width ofthe number zero of any given font sojust think ofthe ch as the width of a character ofthat font now you might be wonderingwhy would that be useful and it's whenyou're setting things like max width onparagraphs for exampleor you might even be using this oncomponents and this is because intypography you generally don't want togo above 75 characters per linefor readability reasons and it justlooks ugly really andi 75 is actually pretty wide i wouldrecommend staying narrower than thatand a really good way to keep check ofthis and not have to guess and sort ofjust randomly put in numbers hoping it'sgoing to look good with things like ramfor your max widths is by using the chbecause if you know you domax width 45 ch it's roughly 45characters wideonce again if you want to know moreabout ch i did make an entire video onit so you can check out the descriptionfor a link on that one as wellare you setting a height first up thefirst thing i want you to do is think doi really need to be setting a heightif you really absolutely you have to youyes kevin i need a height on thisplease think about maybe using a minheight instead of a heightbecause at least in that situation ifthe browser shrinks and the contentneeds more room it won't overflow at thebottom and cause a whole bunch ofproblemsso if you are setting them in height oryou're dead set on setting a height onsomethinga percentage rem or even a viewportheight all fit the billon the word of viewport height thoughjust do be careful with it there areissues that can come up especially onmobile devicesso do be careful with that you know withthe keyboard coming in and there's otherthings that can cause the viewportheight to sort of not act the way you'dexpect it toare you setting padding or margin forthe most part i'd suggest going witheither m or rem for theseit depends on whether you want thepadding or margin to be consistentdespite the element that you're settingit on or if you want it to adjust basedon that element's font size the popularexample i usually turn tois using m for padding on buttons thatway if youset the font size of the button you knowyou want a big version of the button anda small version you change the font sizethe padding will grow and adjust alongwith that font sizeanother example is setting the flow on adocument you could give all of your textelements your paragraphs your list yourheadinggive all of them a margin top of one remand it'd be consistent throughout theentire documentbut you could change that to one m andthen the spacing will be bigger onheadings because they have a larger fontsizeand this can actually be a nice thingbecause it adds some extra white spaceon top of your headings and it can makeyour hierarchy more clearand what about media queries if you'vebeen following me for a while you mighthave noticed that i usually set my mediaqueries using mand i actually do this for consistencyacross all browsers because safari doessomething differently if you userem or pixels compared to the otherbrowsers i won't go into detail on thisi'm going to link to an article byzelier that looks at the differencesbetween them the article is actuallypretty old at this point but every timei check it outit holds true what he wrote about so youcan read about it there and kevin whatabout the other units there's tons ofother units in cssbut honestly i think if you have a goodunderstanding of m and remyou sprinkle in some percentages whereyou need them andyou know ch is really awesome too youcan use that a bit maybe a little bit ofviewports they can become in handy that's about all youreally needand you might even notice i didn'treally talk about pixels either ihonestly don't use them very much and ifyou start taking advantage of relativeunits like m and remi think you'll see that you don't needthem much anymore either i use them forsome things like when you need somethingreally small maybe three pixels for ashadow offset or something but i reallyi find myself barely using them exceptwhen i you know sometimes if i'm doing ademo i'll use it really quickly justbecause it's fast but for the most partthey're not something i turn to verymuch at all and that's it for medid i miss out on your favorite unit ordo you use any of these in differentways that i've talked about or maybethere's somesituation you've run into and that thesethings don't work and you want moresuggestions please let me know in thecomments down belowif you did like this video and you wantmore css content on the regular pleasedo consider subscribinga giant thank you to my patrons fortheir support each and every month andof course until next time don't forgetto make your corn on the internetjust a little bit more awesome