A CSS Unit Deep Dive - Learn CSS Units & When To Use Them
Summary
TLDRThe video script delves into the intricacies of CSS units, highlighting the use and misunderstandings surrounding the pixel unit. It explains that the pixel's size varies based on the device's expected viewing distance, making it a relative unit. The script contrasts this with relative units like 'em' and 'rem', which are tied to font size, and 'vw'/'vh', which relate to the viewport. It also touches on the 'ch' unit for setting max-width based on character width, emphasizing best practices for web design and accessibility.
Takeaways
- 📏 There are over 40 units in CSS, but only a few are commonly used in web design.
- 🔗 CSS linked units are categorized into absolute (e.g., cm, mm, in) and relative (e.g., em, rem, vw) units.
- 📱 The pixel unit is often misunderstood; it's an absolute unit but its size varies based on the device's screen resolution and expected viewing distance.
- 🎯 The reference pixel is the basis for the CSS pixel unit, defined as the visual angle of one pixel at a certain device pixel density and viewing distance.
- 📏 Absolute CSS units like inches are not consistent with their real-world counterparts due to the anchor unit concept.
- 🔄 The 'm' unit is relative to the font size of the element or its parent, making it flexible for sizing but potentially complex in nested structures.
- 🔄 The 'rem' unit is relative to the root element's font size, simplifying the cascading effect of font sizes in nested elements.
- 📐 Percentages are always relative to their parent element's dimension, making them useful for responsive design within a container.
- 🌐 Viewport units (vw and vh) are relative to the viewport's width and height, respectively, allowing elements to scale with the size of the viewport.
- 🔢 The 'ch' unit measures the width of the character '0', useful for setting max-width based on character count for readability.
- 🚫 Using pixels for font sizes can override user accessibility settings, so relative units like 'rem' or 'em' are preferred for better accessibility.
Q & A
How many different units are mentioned in the CSS specification?
-There are at least 40 different units mentioned in the CSS specification.
What are the two types of linked units in CSS?
-The two types of linked units in CSS are absolute and relative units.
Which unit among the absolute CSS link units should be used in web design and development?
-The pixel unit should be used in web design and development among the absolute CSS link units.
What is the main difference between absolute and relative CSS length units?
-Absolute CSS length units provide a precise and fixed size, while relative CSS length units are relative to either a font size or the size of the viewport.
What are some of the misunderstandings about the pixel unit in CSS?
-Some misunderstandings about the pixel unit include thinking it's a non-linear angular measurement, relative to the pixel density of the device, or relative to the expected viewing distance of the device.
What is the anchor unit in CSS, and how does it affect the output of measurements?
-The anchor unit in CSS is either a physical unit for print or a pixel for screen media. It affects the output of measurements by making them dependent on the expected viewing distance of the device or the resolution of print.
What is the problem with using pixel values for font size and how does it affect accessibility?
-Using pixel values for font size can override the default browser settings and ignore the accessibility preferences of users who have modified the settings, potentially affecting a large user base.
How do the 'm' and 'rem' units solve the accessibility issue with pixel units?
-The 'm' and 'rem' units are relative to a font size, which allows them to adjust according to the user's preferences and the parent element's font size, thus improving accessibility.
What is the main advantage of using the 'rem' unit over the 'm' unit for font sizes?
-The main advantage of using the 'rem' unit over the 'm' unit for font sizes is that it solves the cascading problem of font sizes being dependent on a chain of parents, making it easier to manage and track the size of elements.
How do viewport units like 'vw' and 'vh' differ from percentages?
-Viewport units like 'vw' (viewport width) and 'vh' (viewport height) are relative to the size of the viewport, whereas percentages are relative to the size of their parent element.
What is the CH unit in CSS and when is it useful?
-The CH unit in CSS measures the width of the character '0' in the font. It is useful for setting a max-width on a paragraph to ensure readability and to adhere to the web design rule of thumb for line length.
Outlines
🌟 Understanding CSS Units and the Pixel Unit
This paragraph discusses the variety of units available in CSS, highlighting that while there are over 40 different units, many are either not used or rarely used in web design. It explains the difference between absolute and relative CSS length units, emphasizing that only a few are commonly used. The pixel unit, despite its common usage, is described as the most complex due to various misconceptions about its nature. The pixel unit's relationship with physical measurements and device pixel density is explored, clarifying that it is a relative unit tied to the expected viewing distance of the device. The paragraph concludes by explaining the anchor unit concept in CSS, which determines how absolute units are interpreted based on the output medium (print or screen).
📏 CSS Units: m, RAM, and their Application
This section delves into the m (em) and RAM (rem) units, which are relative to font size. It explains how setting the font size to 16 pixels in CSS does not change the default browser font size, which is also 16 pixels. The paragraph highlights the issue of accessibility when using pixel values for font size, as it overrides user preferences. It introduces the m and RAM units as solutions to this problem, with m being relative to the parent element's font size and RAM being relative to the root element's font size. The paragraph also discusses the challenges of using m units for padding, margins, and widths, and how RAM units solve the cascading issue of font sizes depending on a chain of parents.
🎨 Applying CSS Units to Design Elements
This paragraph focuses on the practical application of CSS units, particularly percentages, VW (viewport width), VH (viewport height), and CH (character width). It explains how percentages are relative to the parent element and demonstrates this with an example of a container's width relative to its parent header's width. The paragraph then introduces viewport units, which are relative to the viewport's dimensions, allowing for responsive design. The CH unit is also discussed, showing how it can be used to set a maximum width for text based on the character '0', improving readability and aesthetics in web design.
🙏 Conclusion and Call to Action
In conclusion, the paragraph emphasizes the importance of understanding the various CSS units and their appropriate use cases. It suggests that while some units are rare and can be learned on an as-needed basis, having a solid grasp of the main units is crucial. The video ends with a call to action, encouraging viewers to like and subscribe to the channel for more content.
Mindmap
Keywords
💡CSS specification
💡Absolute CSS units
💡Relative CSS units
💡Pixel unit
💡Reference pixel
💡m unit
💡rem unit
💡Viewport units
💡Percentages
💡CH unit
💡Accessibility
Highlights
There are over 40 different units in the CSS specification, but many are rarely used or should not be used at all in web design.
CSS has two types of linked units: absolute and relative. Absolute units include centimeters, millimeters, quarter millimeters, inches, points, and pixels.
Among the absolute units, only the pixel unit should be used in web design and development.
Relative CSS length units are relative to either font size or the size of the viewport, and you only need to know about 10 of them.
The pixel unit in CSS is often misunderstood and is actually the most complicated unit.
The CSS pixel unit is relative to the expected viewing distance of the device being used, which explains why the same number of pixels can represent different physical sizes on different devices.
The reference pixel is a concept in CSS that relates to the visual angle of a pixel on a device with a specific device pixel density and viewing distance.
The 'm' unit in CSS is relative to the font size of the element it is assigned to, unless it is assigned to the font size property, in which case it is relative to the font size of the parent.
The 'rem' unit is relative to the font size of the root element, making it a more consistent unit for font sizes compared to 'm'.
The 'ch' unit measures the width of the character '0' in the font, which can be useful for setting max-width in a way that accommodates a typical character length.
Percentages in CSS are relative to their parent element's dimension.
Viewport units like 'vw' and 'vh' are relative to the viewport's width and height, respectively.
The pixel unit's complexity comes from its dependence on the reference pixel, which is based on the device's expected viewing distance.
Using 'rem' for font sizes avoids the cascading issue that 'm' introduces, where font sizes are dependent on a chain of parents.
The 'm' unit is particularly useful for paddings, margins, and widths when not assigned to the font size property, as it becomes relative to the font size of its own element.
When setting font sizes, it's generally recommended to use 'rem' units and avoid 'm' units for better accessibility and consistency.
The 'rem' unit solves the problem of font sizes depending on each other, which can make tracking the actual size of elements difficult.
For setting max-width, the 'ch' unit is preferred over 'm' or 'rem' because it aligns well with the recommended character length per line in web design.
Transcripts
there's at least 40 plus different light
units in the CSS specification and
initially I was going to go over
literally each one of them until I
realized how silly of an idea that was
the truth is many of these units should
either not be used at all or are rarely
used for web design for example in CSS
there are two types of linked units
absolute and relative the absolute CSS
link unit is a unit of length that
provides a precise and fixed size for
the element they're applied to these
units include centimeters millimeters
quarter millimeters inches because
points and pixels but out of all of them
only the pixel unit should be used in
web design and web development on the
other hand a relative CSS length unit is
a unit of length that is relative to
either a font size or relative to the
size of the viewport these units include
the following but in most cases you're
only ever going to need 10 of them and
out of these 10 units only four of them
are actually units you absolutely need
to know this is not to say that the
other units are useless because they're
not but they're not frequently used in
practice and can be learned in an
eternal basis
you might think that the pixel unit is
the easiest to understand but actually
it's the most complicated unit of all
you see there's a lot of confusion about
the pixel unit some people think it's a
measurement that never changes some
people think it's a distance measurement
some people think it's a relative unit
despite being defined as an absolute
unit some people think it's somewhere in
the middle and refer to it as a hybrid
of both absolute and relative some
people think it's a non-linear angular
measurement or in other words uses
mathematics under the hood and some
people think it's relative to the pixel
density of the device While others think
it's relative to the expected viewing
distance of the device well which one is
it the truth is if you read one article
it'll tell you one thing and present the
information as being objectively true
then you'll read another article that
contradicts the previous article whilst
simultaneously presenting the
information as being objectively true
however here's some non-subjective
objective facts about the CSS pixel unit
on my 27-inch 1080p monitor I have a box
with a width of 96 pixels and a height
of 96 pixels if I take a ruler and
measure the width of my box I should get
2.54 centimeters because 2.54
centimeters equals one inch but as you
can see on my screen it's actually
almost 3 centimeters then on my phone
which surprisingly has a 1440p
resolution the size is 1.4 centimeters
on my 27 inch 1440p monitor the size is
2.2 centimeters and finally for the
cherry on top of the cake we have my
television with a size of well I don't
even know what the size of my television
is something above 50 inches I think but
anyways the size of the box is 5.5
centimeters so we've got a bunch of
different sizes for the same box well
why why is one CSS inch not actually one
inch when I measure it and why am I
getting different sizes for the same box
on different devices well first of all
it's important to understand that the
CSS absolute units aren't necessarily
the same as the real world counterparts
for example one inch and and the real
world equals 2.54 real world centimeters
however in CSS although one CSS inch
equals 2.54 CSS centimeters the output
for these units are totally dependent on
something called The Anchor unit if the
output is for print or a similar
resolution to print then a physical unit
is the anchor unit in other words CSS
will output measurements equal to those
of the real world so one CSS inch but
for print would be the same as one inch
as measured with a ruler across your
printed paper but if the output is for
screen media including high resolution
devices low resolution devices and
devices with unusual viewing distances
pixel is the anchor unit in this case
where pixel is the anchor unit its
measurement will be dependent on
something called the reference pixel
unfortunately the official explanation
of the reference pixel on the w3c CSS
specification is what leads to literally
all of the confusion related to the
pixel unit the official explanation is
as follows and and I quote the reference
pixel is the visual angle of one pixel
on a device with a device pixel density
of 96 DPI and a distance from the reader
of an arm's length for a nominal arm's
length of 28 inches the visual angle is
therefore about
0.0213 degrees for reading at arm's
length one pixel does corresponds to
about 0.26 millimeters or 196 of an inch
this explanation is what led a lot of
people to believe that the pixel unit is
a non-linear angular measurement but we
can see that this is not the case with
the following paragraph and I quote the
image below illustrates the effect of
viewing distance on the size of a
reference pixel a reading distance of 71
centimeters or 28 inches results in a
reference pixel of 0.26 millimeters
while a reading distance of 3.5 meters
or 12 feet results in a reference pixel
of 1.3 millimeters notice how the
reference pixel is referred to in
millimeters rather than radians degrees
or grads and how the reference pixel
changes with viewing distance whereas
the angle would be constant the
reference pixel in more simpler terms is
a pixel that looks exactly the same in
all viewing situations relative to the
expected viewing distance of a device
this is why I had different measurements
across the different devices I measured
because they all had different expected
viewing distances the expected viewing
distance for my television substantially
surpasses the expected viewing distance
on my monitor and although the Box had a
different physical measurement the Box
actually looked exactly the same
relative to the size difference of both
the TV and the monitor this standard is
beautiful because it creates consistency
across all devices regardless of their
size and pixels per inches so in summary
the pixel unit is a measurement of
length that is relative to the expected
viewing distance of the device being
used and if none of this made any sense
that's okay like I said it's one of the
most complicated unit of all but the
beautiful thing about it is you don't
need to understand it to use it when
pixel will always be the smallest width
to make a line visible on on the
specific device and that's really all
you need to know to use it
now that we understand how the pixel
unit works we can finally move on to the
m and RAM unit but first we need to
understand what problem they actually
solve in the real world in my HTML all I
have is a container with an unordered
list of four list items then in my CSS I
can select the unordered list and give
it the font size property when I set the
font size to 16 pixels we see nothing is
happening and if I comment it out we see
we still have the same font size the
reason this is happening is because 16
pixels is the default font size of all
of the popular browsers including Chrome
which happens to be the one that I'm
using we can actually see that this is
the case when I open my settings on my
browser go on the appearance Tab and
find the customize fonts button we see
that the default font size is set to 16
pixels and as it happens two percent of
users change this value for
accessibility reasons and when it comes
to the internet three percent is
probably a few million people the reason
I'm showing you this is look at my
unordered list changing sizes as I
change the default font size on my
browser you can see it grows and shrinks
as I change the default font size on my
browser however back in my CSS file if I
were to explicitly set the font size on
my unordered list the 16 pixels and try
changing the default font size of the
browser we see it's not working this is
one of the pitfalls of using the pixel
unit anywhere and on any property some
people make the mistake of adding a
pixel font size to the HTML element to
overwrite the default not knowing that
they're actually screwing with the
accessibility preferences of potentially
three percent of their user base setting
a pixel font size on the HTML makes your
entire website ignore the preferences of
people that took the time to modify the
setting big disrespect don't do this but
this is where the relative units come
into the mix unlike the pixel unit which
is an absolute unit the m and RAM units
are categorized as being relative units
that are relative to a font size in the
case of the munit it is relative to the
font size of the element it is assigned
to unless it is assigned to the font
size property in which case it will be
relative to the font size of the parent
so for x example when I set the font
size on the unordered list to 1M we see
nothing happened and this is because
over on the HTML the 1M that is assigned
to the font size of the unordered list
is asking the parent container for its
font size well I didn't set a font size
on the container so it asks the next
parent but again I did instead of font
size on the body and after the body
there is no other parent to ask so it
defaults to being relative to the font
size of the root element which is 16
pixels by default however if I select
the container and give it a font size of
32 pixels for example now 1M on the UL
element is relative to the font size of
the container because the container is
the closest parent with a font size
defined we see the font size on our list
items are now way bigger but earlier I
said using pixel values is problematic
for accessibility reasons so what I can
do is replace the 32 pixels with 2m and
we see we get the same result the reason
we get the same result is because on the
container the munit is asking the parent
of the container for its font size the
body doesn't have a font size and
because there is no other parent after
the body it defaults to being relative
to the root element which has a font
size of 16 pixels by default also we set
the M unit to 2 which means it's 16
pixels times 2 which is 32 pixels the
same value we had before when I try to
change the default font size in my
browser settings we see our list items
are growing and shrinking just as
expected but although the munit fixed
the issue we had with accessibility it
introduced another problem in our code
imagine I give the body a font size of
1.5 M we see our items increased in size
now imagine I also add a font size of 2m
on the list elements we see our items
grew in size again the issue isn't with
the size of our items but with the fact
that we've got four font sizes that are
depending on each other and this makes
it super difficult to keep track of the
actual size of each element so for
example what does 2m represent in our
list element well we have to look at the
parent but the parent also uses the
munit so we have to check the parent of
the parent while the parent of the
parent also uses the M unit so we have
to ask the parent of the parent of the
parent and you get my point this is
crazy and you shouldn't be doing this
instead what we can do is replace
everything that has the M unit with the
REM unit and now we see our items all
have a more reasonable size the way the
ram unit works is instead of being
relative to the font size of the parent
it is being relative to the font size of
the root element the root element is the
HTML element and the HTML element has a
default of 16 pixels using the ram unit
solved the cascading problem that we had
with the munit where each font size was
dependent on a chain of parents and as a
general rule whenever a set of value on
the font size I always use Rams I never
use the M unit for font sizes but that
doesn't mean that I never use it on the
HTML I'm going to remove the unordered
list and replace it with a button and
give it the class of button then on my
CSS I'll remove everything and select
the button by its class name I'll give
it a background color of red a color of
white and I'll give it a font size of
1.5 run our button needs some padding
earlier I said that the M unit is
relative to the font size of the element
that is assigned to unless it is
assigned to the font size property in
which case it'll be relative to the font
size of the parent this means that when
I use the munit on the font size
property it becomes relative to the
parent element however if I give a
padding to my button of 1M because 1M
isn't on a font size it is then relative
to the font size of its own element this
is where the M unit really shines it's
an amazing unit to use on paddings
margins and widths because when it isn't
assigned to the font size property it
becomes relative to the font size of its
own element and we can see that this is
the case when I change the font size on
my button we see the padding is always
being relative to the font size of the
button itself this means we don't really
need to worry about the padding ever
again when we change the font size on
our button
in this chapter we're going to be
looking at percentages and the two main
viewport units in my HTML all I have is
a header with the class of header a div
with the class of section container and
nested inside the div is an H1 heading
with the class of header title we're
going to be creating a header so in my
CSS I'll select the header by its class
name and give it a background color of
light blue a color of white and a
padding of one amp for the top and
bottom and zero for the left and right
I'll also select the H1 by its class
name and give it a font size of 2.5 RAM
and a margin of zero then I'll select
the container by its class name and give
it the border of 3 pixel solid red just
so we can see it and a width of 80
percent you see our border shrunk in
size if I comment out the width for one
second we see the Border covers the
entire width and this is because
percentages are relative to their parent
the parent of the section container is
the header and the header is a block
level element so it covers 100 of the
width of the page when I uncomment the
width on our section container it is
relative to the width of the parent
header and we can actually test this by
adding a width of 50 on the header now
the header is half in size and we see
the section container's width of 80 is
80 relative to the width of the parent
header percentages are always relative
to their parent however if you don't
want the width to be relative to the
parent you can use the VW unit for
example if I replace 80 percent with 80
VW we see our border now covers 80
percent of the viewport and this is
because the VW unit is a view per unit
and is relative to the viewport width
there's also the VH unit it's the same
as VW but it's relative to the viewport
height instead I'll comment out the
width on our section container and add a
height of 100 VH on the header we see
this covers the entire viewport height
and if I set it to 50 VH it'll cover
half of the viewport height use
percentages when you want to size
relative to the parent and use viewport
units when you want to size relative to
the viewport
the last unit I want to talk about is
the CH unit this unit is pretty simple
all it does is measures the width of the
character 0 on your font the reason this
is useful is because we can use it to
set a Max width on a paragraph and the
reason you would want to do that is
because on this example we see my text
is super long it's ugly to look at and
is hard to read to fix it I can select
it in the CSS and give it a Max width of
60 CH we see this looks a lot better and
the reason this works so well over using
M's or Rams for setting a Max width is
because in web design as a rule of thumb
your paragraph should have a length per
line of around 45 to 75 characters and
using the CH unit makes the finding a
specific Max character length super easy
and there you have it hopefully now you
have a better understanding of the units
we talked about and for all the other
units they are super rare and can be
learned in a need to know basis if you
enjoyed the video please consider liking
the video and subscribing to the channel
thanks for watching
تصفح المزيد من مقاطع الفيديو ذات الصلة
5.0 / 5 (0 votes)