A CSS Unit Deep Dive - Learn CSS Units & When To Use Them

Summary

The 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

00:00

🌟 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).

05:02

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

10:03

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

15:05

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

Keywords

💡CSS specification

The CSS specification refers to the set of rules and guidelines that define the syntax and behavior of Cascading Style Sheets (CSS), which is used for styling web pages. In the video, the speaker mentions that there are over 40 different units in the CSS specification, highlighting the complexity and variety of options available for web design and development.

💡Absolute CSS units

Absolute CSS units are units of measurement that provide a precise and fixed size for elements they are applied to, regardless of the user's device or settings. Examples include centimeters, millimeters, and pixels. The video emphasizes that among these, the pixel unit is the most commonly used in web design due to its consistency across devices.

💡Relative CSS units

Relative CSS units are units of length that adjust based on either the font size or the size of the viewport. These include em, rem, and percentages. The video explains that these units are essential for creating scalable and responsive designs that adapt to different screen sizes and user preferences.

💡Pixel unit

The pixel unit in CSS is often misunderstood as it is defined as an absolute unit but behaves like a relative unit depending on the device's screen resolution and expected viewing distance. The video clarifies that the pixel unit is a measurement of length relative to the expected viewing distance, making it consistent across devices despite varying physical sizes.

💡Reference pixel

The reference pixel is a concept in CSS used to define how the pixel unit should be interpreted on different devices. It is based on the visual angle of a pixel on a device with a specific pixel density and viewing distance. The video explains that the reference pixel is what makes the pixel unit's size relative to the device's expected viewing distance.

💡m unit

The m unit (em) in CSS is a relative unit that scales based on the font size of the element it is applied to or its parent if not directly assigned. It is useful for creating scalable designs but can lead to complexity if multiple elements depend on each other's font sizes. The video advises using the rem unit for font sizes instead of the m unit to avoid such issues.

💡rem unit

The rem unit (root em) is a relative unit in CSS that scales based on the font size of the root element (html) rather than the immediate parent. This unit simplifies scaling and avoids cascading font size dependencies, making it preferable for font size declarations over the m unit.

💡Viewport units

Viewport units in CSS, such as VW (viewport width) and VH (viewport height), are relative units that scale based on the dimensions of the viewport. These units are useful for creating responsive designs that adapt to the size of the user's screen, ensuring that elements are sized appropriately regardless of device.

💡Percentages

In CSS, percentages are used to define sizes relative to the parent element's corresponding property. They allow for flexible layouts that adjust based on the parent's dimensions. However, percentages can also be relative to the viewport when used for widths and heights, as explained in the video.

💡CH unit

The CH unit in CSS measures the width of the character '0' in the used font. It is a useful unit for setting maximum widths for text elements to ensure readability and to adhere to best practices for line length in web design.

💡Accessibility

Accessibility in web design refers to making content and interfaces usable for as many people as possible, including those with disabilities. The video emphasizes the importance of not using pixel values for font sizes to respect user preferences and accessibility settings, which can be altered for various reasons, including visual impairments.

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