CSS Units & Sizes Tutorial for Beginners
Summary
TLDRIn this beginner CSS tutorial, Dave explores various CSS units, focusing on pixels, percentages, and relative units like em and rem. He explains the importance of not using absolute pixel values for font sizes to maintain flexibility and accessibility, and demonstrates how to apply these units for different elements like paragraphs and headings. Dave also discusses viewport units, their use cases, and potential issues, emphasizing the importance of understanding how units affect layout and design.
Takeaways
- 🌐 The tutorial is part of a beginner CSS series using Chrome, Visual Studio Code, and the Live Server extension for real-time web page viewing.
- 📏 CSS units determine the size of elements on a webpage, with pixels (px) being the most commonly used absolute length unit, equivalent to 1/96th of an inch.
- 🎨 Using pixels for font size is discouraged as it removes user control over default browser settings, which typically set the base font size to 16 pixels.
- 🔲 Setting absolute font sizes can lead to undesired effects when user preferences for larger or smaller text conflict with the CSS settings.
- 🔄 Percentage units in CSS represent a fraction of another value, making them relative to the parent container's dimensions.
- 📝 The 'em' unit is relative to the font size of the root element (default browser setting), and is useful for scalable font sizes and responsive design.
- 🔧 Using 'em' units for margins and paddings can lead to compounding effects, causing sizes to increase based on the font size of parent elements.
- 🎯 The 'rem' unit is recommended for font sizes as it scales relative to the root element, maintaining consistency across the webpage.
- 📐 The 'ch' unit is based on the width of the character '0', useful for setting consistent widths for text elements like columns.
- 📱 Viewport units (vw and vh) are relative to the viewport's width and height, with 1vw equal to 1% of the viewport's width and 1vh equal to 1% of the viewport's height.
- 🚫 Setting body width to 100% viewport width can cause horizontal scrollbars when content overflows, whereas using percentages avoids this issue.
- 📈 To make the body element fill the entire page height, use 'min-height: 100vh' to ensure it covers at least the full viewport height, even if the content does not.
Q & A
What is the main topic of the tutorial?
-The main topic of the tutorial is about understanding and using different CSS units for styling web pages, with a focus on beginner-level knowledge.
Which tools does Dave use in the tutorial?
-Dave uses the Chrome web browser, Visual Studio Code editor, and the Live Server extension for Visual Studio Code to view and edit the web page.
What is the significance of pixels (px) as a unit in CSS?
-Pixels are absolute length units in CSS, where one pixel is equal to 1/96 of an inch. It represents a single pixel on the screen, and it's the most commonly used absolute unit for specifying sizes, especially for things like borders.
Why shouldn't pixels be used for font sizes?
-Pixels shouldn't be used for font sizes because it sets an absolute size that cannot be adjusted by the user in their browser settings, taking away the user's control over the default font size.
What is the role of percentages in CSS?
-Percentages in CSS represent a fraction of another value, making them relative to the parent element's dimensions. They are commonly used for setting widths and heights of elements as a proportion of their containing element's size.
What is the difference between 'em' and 'rem' units?
-The 'em' unit is relative to the font size of its own element's parent, while 'rem' (root em) is relative to the font size of the root element, which is typically the default browser setting. Using 'rem' ensures consistent scaling that doesn't get amplified through the DOM tree.
When would you use 'em' units instead of 'rem'?
-You would use 'em' units for properties like margin or padding that should scale relative to their parent element's font size, rather than the root font size.
What is the viewport width (vw) and viewport height (vh) units?
-Viewport width (vw) and viewport height (vh) are relative units where 1vw is 1% of the viewport's width and 1vh is 1% of the viewport's height. They are useful for creating responsive designs that adapt to the size of the viewport.
What is the issue with setting the body element to 100% viewport width?
-Setting the body element to 100% viewport width can cause a horizontal scrollbar to appear when the content exceeds the page height, which is generally undesirable as it disrupts the user experience.
How can you ensure the body element is the full height of the page?
-You can set the body element's min-height to 100vh (viewport height units) to ensure it expands to at least the full height of the viewport, while still allowing it to grow with the content if necessary.
What is the importance of understanding CSS units?
-Understanding CSS units is crucial for effective web design and development as it allows developers to create responsive and adaptable layouts that cater to different screen sizes and user preferences.
Outlines
🌐 Introduction to CSS Units and Tutorial Setup
The video begins with an introduction to CSS units, setting up the Chrome web browser, Visual Studio Code editor, and the Live Server extension for viewing web pages. The tutorial focuses on the most common CSS units, using the paragraph and heading elements to demonstrate the effects of different units on font size and page layout. The importance of not using absolute pixel values for font size is emphasized to maintain user control over browser settings.
📊 Understanding Percentage and Relative Units
This paragraph delves into the use of percentage units for width, explaining how they relate to the parent element's width. The concept of relative length units is introduced, with a focus on 'em' units for font size, which are tied to the root element's font size. The potential for unintended consequences when using 'em' units is discussed, highlighting the importance of using 'rem' units for consistent sizing across the document.
🔠 Exploring 'em', 'rem', and 'ch' Units
The video continues with an exploration of 'em' units for font size, emphasizing their relationship to the parent element's font size. 'rem' units are introduced as a safer alternative, always referencing the root element's font size. The 'ch' unit, based on the width of the character '0', is explained as useful for defining columns in a layout. The paragraph also touches on the default styles set by the browser and how they can be overridden with custom CSS.
📏 Applying Viewport Width and Height Units
This section discusses the use of viewport width (vw) and viewport height (vh) units, which are relative to the browser's viewport size. The video demonstrates how setting the body element's width to 100% viewport width units can lead to issues when content overflows the page height. A better approach is suggested, using percentage units for width and setting the body's min-height to 100% viewport height to ensure it fills the entire page vertically, even when there's not enough content.
🎨 Final Thoughts and Encouragement
The video concludes with a brief overview of using viewport height units to make the body element fill the entire page height. The speaker encourages viewers to strive for progress over perfection, emphasizing the value of making consistent, incremental improvements in coding skills. A call to action is made for viewers to like, share, and subscribe to the channel for more content.
Mindmap
Keywords
💡CSS Units
💡Chrome Web Browser
💡Visual Studio Code Editor
💡Live Server Extension
💡Pixels (px)
💡Percentage (%)
💡em
💡rem
💡Viewport Units
💡CSS Box Model
💡CSS Reset
Highlights
Introduction to CSS units, focusing on the most common ones used in web design.
Explanation of absolute length units, specifically pixels (px), and their equivalence to screen size.
Discussion on the default browser font size and its impact on setting font sizes in pixels.
Demonstration of how changing user settings in the browser affects the font size set in pixels.
Explanation of relative length units, starting with the percentage (%) and its relation to parent elements.
Example of setting the width of an element using percentages and how it relates to the parent's width.
Introduction to the 'rem' unit for font sizes, explaining its relation to the root element's font size.
Comparison between 'em' and 'rem' units, highlighting the importance of using 'rem' for consistent font sizing.
Explanation of the 'ch' unit, which is based on the width of the character '0'.
Use case of the 'ch' unit for setting the width of a paragraph based on the number of characters before wrapping.
Discussion on the 'viewport width' (vw) and 'viewport height' (vh) units, and their relation to the browser's viewport.
Practical example of setting the main element's width using viewport width units.
Explanation of the potential issue with using 100% viewport width when content overflows the page height.
Solution for making the body element full height of the page using viewport height units.
Use of the CSS 'box-sizing' property to ensure padding and border sizes are included in the element's width and height.
Demonstration of the default styles applied by the browser and how to override them using CSS.
Explanation of the CSS 'reset' technique and its purpose in web development.
Encouragement for viewers to strive for progress over perfection in their coding journey.
Transcripts
[Music]
hello and welcome hi i'm dave this
tutorial is part of a beginner css
series i'll be using the chrome web
browser the visual studio code editor
and the live server extension for visual
studio code to view the web page
there are links to these tools starter
code files and all resources in the
description below
let's move on to css units units
determine the size of everything in your
page today we're going to cover the most
common css units on the left i have
visual studio code on the right i have
the chrome browser it has an h1 heading
on the page and we have one paragraph on
our page and we're displaying this page
with the live server extension so
anytime we make a change and save our
css file we'll automatically see the
changes over here on the page i'm going
to start out by just putting in a
paragraph selector
and then i'm going to put in the font
size
and after that without even typing
anything look what visual studio code
gives us a lot of suggestions there are
so many different units we can choose
from so today we'll cover only the most
popular ones is we don't need to cover
all of them just the ones that you'll
see and construct your pages with most
frequently so i'm not even going to put
in a definition right now let's just
delete that and switch over to the mdn
page for values and units and we can see
a chart here of absolute length units
and really the only absolute length unit
we will use commonly is pixels and you
can see here is the equivalency it's one
pixel is equal to 196 of an inch and
really one pixel as you might guess
means one pixel on your screen
we abbreviate that with px and i say
it's the only absolute value we're going
to cover because as mdn says it's really
the only value that you will commonly
use as far as absolute units go
so let's switch back to our page and now
here in our css page i'll once again
select the
paragraph and we can set a
absolute size to the font in our
paragraph if we want to the default in
any browser is usually 16 so if i set it
to 16
we don't see a change but if i set it to
32
we definitely see a change it gets twice
as big but i don't usually want to use
an absolute value like pixels for a font
size and let me show you why
normally
we have a default browser size as i
mentioned that's usually 16 pixels
however if i set that on the root
element
font size
16 pixels we don't see a change here but
if i go into my settings in chrome which
you can do with the three dots and then
choose settings once you launch that
you'll be on a settings page and then
you can choose appearance
you go to a font size user preference
and medium is what most are on but
there's also other choices from very
small to very large i'll choose very
large we definitely see a change on the
settings page right when i do that
back in our document
we don't see a change it didn't change
at all i can refresh and it won't make
any difference it did not change our
font size with the user settings and
that's because we took that choice away
when we said no these absolutely must be
16 pixels here that's our root size but
if i delete this and we just let the
browser handle the default size
instantly all of our font gets bigger
and our user settings take over we don't
want to take that choice away from the
users so we don't want to use an
absolute font size such as a pixel
setting so i'll go ahead and delete that
so where would we want to use pixels in
absolute value there are other settings
that we might want an absolute value for
so i'll select the h1 that i have here
and i'm going to set a border on it and
i'll set it to 2 pixels and then just so
we can see it better i'll set it to
dashed and red so it really stands out
and save and now we can see this border
around our h1 element and we have this
absolute value for the pixel width and
no matter what happens to the page on a
small viewport large viewport whether
it's a mobile device or a large desktop
screen
this will remain as two pixels and
that's okay in this instance let's go
back to our mdn page
and now that we've covered the only
pixel size that we were going to cover
and that was down here on our pixel
chart
we're going to now cover percentage and
we see that up here in a different chart
this is a numbers links and percentages
chart here
so we're going to use percentage and it
says it represents a fraction of some
other value so 50 of something else
percentages are always relative to
another quantity so that's a
consideration as well now when we set
percentages we wouldn't normally do that
with a font size either so let's set a
percentage for a width on our h1 and now
by default an h1 is a block level
element and so by default it has a width
of 100 so if we do that we're not really
changing anything and now it's just 100
as expected so let's go ahead and change
that it looks at the parent though it's
taking up one hundred percent of the
parent's width or whatever was
given to it so whatever it has available
to it it took up one hundred percent and
now this is only taking up
50 percent
so let's look at the parent for the h1
it is inside of a header element
so if we take this header element
and we set it to a width
of 50 percent
then we should see a difference and yes
it's even smaller so we're taking up
only 50 percent of the header element
which is taking up 50 of the page so
really this h1 would be 25 of the page
likewise if we change this to a hundred
for the header
then we'll see our h1 takes up fifty
percent of the page so that's the thing
to remember about setting a percentage
for the width is that you are putting it
relative to the parent it's only using
what it has available to it if the
header is 100 percent
then the h1 that is the child has a 100
percent of the page available to it
however if the header is smaller let's
put it at 80 percent then
we're only using up fifty percent of
eighty percent of the page and once
again if you want an element that is a
block level element to take up one
hundred percent of the width of the page
you don't really need to set it because
that is the default value already so now
we're taking up half of the page by
setting the h1 to 50
because it is 50
of the full 100 width and you may see
other uses for percentages as well but
you commonly see them to set the sizing
of different elements as far as the
width of the page or sometimes the
height but also we don't need to set the
height because it will grow
as the content grows i'm going to go
back to my settings and set it from very
large back to medium which is where most
have their browser default to now when
we look at our page the font is smaller
but let's talk about another relative
unit and this one does show on the mdn
page in the chart down here under
relative length units and it's the rim
this is the unit that we'll typically
use for font size and it relates to the
font size of the root element now i
already suggested we shouldn't set a
font size on the root element so for our
html element
we typically wouldn't set a font size in
here because we want to let the browser
handle that and set the default font
size so let's not do this for the html
element i'll just go ahead and cut this
i'm going to put it below the h1 and i'm
going to set a font size
for our paragraphs instead and this font
size if we set it to one ram
that's already the default so it
shouldn't change anything and we see the
size is the same so it says one root
element which the root element is the
default font size set by the browser the
em doesn't stand for element by the way
that's m so we have one root em or one
root m
but that means the root size that is
defined and in our case when we don't
set it then it's set by the browser so
hopefully that clears up some confusion
but if we put in two m's then it's going
to double the default size and now we're
probably at 36 pixels right here because
most browsers default to that 16 pixel
size
so you can see how this relates back to
the root now if we set a font size on
the parent because our paragraph is in a
main element
we set this font size to
to rim also
it doesn't change the paragraph font
size at all because the font
set here is not relative to the main
element it's not relative to the parent
it's relative to the root which is
defined by the browser so it's always
going to look back to that default root
size if we had set a font size in the
html element it would be looking at that
but without setting it it's the default
size
so what happens though if we switch
these units if we're not using rem
if we're using
m just em so now
i'll delete the r there and save oh boy
that got a lot bigger well here's the
problem that we would have if we were
using ms for our font size it gets
amplified so our main element was
looking at the root so it doubled that
to 32 pixels
and then using two m's
is looking at the main element which is
the parent of the paragraph and so then
it doubled that so now we're at 64
pixels so that's what happens and you
can get unintended consequences if you
just use m's and that's why using the
rim and always looking at the root
definitely helps because the way we can
get confused for example is if i remove
this setting on the main and i save well
now this is also looking at the root
because there's no other font size saved
and so we think okay we're good to use
just m's but the problem is
if somewhere along the way in our
project and we have many elements we're
styling
we set another font size on a parent
element suddenly it's amplified when we
use m's so i'm going to switch this back
to two rims and get closer to the size
we'd want and it's going to look at the
root so when would we use
m's instead of rims we know we want to
use rems on font size well when we set
the font size on an element
m doesn't look at the parent it looks at
the element itself and so we could use
it for something like margin or padding
which i know we haven't covered and we
will in more detail when we look at the
css box model but i'm going to go ahead
and do that here for the h1 so if i set
a font size for the h1 and let's make it
bigger let's make it three
rim here and we save we instantly have
a bigger font size on the h1 but now i
could set
the padding
to
1
m which is the equivalent
of the font size of that element so now
this would also be three rims so it
should be a pretty good size padding yes
we have a lot of padding so i probably
don't want that much maybe i want to
drop it to
0.5
and now that's that's more reasonable
that looks pretty good for a heading
there so we added that padding which is
inside this border it added extra
padding and that is essentially half of
three rims which would be one and a half
and if we relate all this back to the
default 16 pixel size
one and a half of those
would be 24 pixels whereas three rims
would be
48 pixels another instance where we may
use m's instead of rims would be for the
padding or margin setting on say a
button if we created a button we would
have text in the button we could set the
font size for that button with rem but
then we could go ahead and set the
padding and or margin with the m units
let's go back to the mdn page and look
at our chart one other relative unit i'd
like to look at today is the ch that
stands for character and we have the
advanced measure width of the glyph 0
which essentially means the character 0
of the element's font so whatever font
we're using it's the measurement of 0
and that helps us determine the
character width and that kind of comes
from print
magazine newspaper layout and those sort
of things where you only want to have a
certain width based on the character
size so in this example we have a font
size here for our paragraph i'm going to
go ahead and set the width of the
paragraph and let's say we don't want
any more than an estimated
40 characters per line before the line
wraps in the paragraph if we set that
width notice it now has approximately 40
characters before the line wraps and
that kind of helps us define columns if
we're doing that in some type of layout
now we've acknowledged that the browser
sets a default font size but it actually
sets a lot of different default styles
as well so let's go ahead and right
click on this h1 heading and choose
inspect or you could press ctrl shift
and the letter i either way what we're
doing is opening up the dev tools it may
scrunch our page here a little bit but
that's okay if i highlight this h1 now
it is showing several things about the
page it's showing that there's a large
margin that's going to be the orange
when i highlight over
it's showing the green area and that's
padding that we set
and then the blue area is the h1 itself
right here so we see all of those things
in dev tools when we hover over these
elements and by the way i'm on the
elements tab of dev tools and then if
you don't have your dev tools on the
right you can click the three dots here
and there's a dock side setting maybe
it's on the bottom for you but if you
want it on the right you can choose dock
to the right just like i have here so we
can really see more about all of these
elements in dev tools what we can also
see as we come down here are the styles
and then we see the h1 and the styles
that i have set on the h1 element but
underneath that we see some others as
well and it says user agent style sheet
this is what the browser is setting on
the h1 element by default that we don't
have to and you can see we have put in a
different font size so we have
overridden the font size for the h1
element so it has crossed that out
everything else here the display block
and the different margins and even the
font weight are applied from that user
style sheet so those are default styles
and we can override them just like i did
with the font size and before we get
into these next two relative units we
are going to override some of these so
what i want to do
is start a css reset which i'll talk
about more
in the tutorial of the css box model as
well but i'm going to use
the selector that selects all elements
again our wildcard selector and here i'm
going to set the margin to zero
the padding
to zero and one other setting that says
box
sizing and i'm going to set that to
border box and when i save
notice all the padding and margin is
gone now
our h1 is right up in the left corner we
don't have any space between the
paragraph and the h1 we got rid of all
of those default margins and paddings
that were creating that extra space but
that's important when we go back to the
mdn page and we look at these next two
relative units we have viewport width
which is one percent of the viewport's
width
and viewport height which is one percent
of the viewport's height so let's look
at how we can apply those but if we had
that extra margin and padding there we
wouldn't be able to see the detail that
i want to show okay i'm going to take
our main element here and set a width on
it with our viewport width units
just so we can see
what it is capable of and so i'll do
that i also need to set a background
color just so we can see what we're
doing better
and i'll set this to let's say sky blue
and save so now we can see the width of
our paragraph is actually wider than the
width of our main element and so it is
overflowing that main element but we
have actually set the main element to 50
of the width of the full page and you
can see that's matching the 50 percent
width that we have up here but i'm using
the viewport width units right here
there may be times when you want to use
the viewport width but most of the time
i find myself using the percentage and
getting the same result and i'll give an
example where the percentage is actually
a better choice so let me remove that 50
percent and i'll remove this background
color that's making our page look bad
and we'll come back up to the top and
underneath our select all i'm going to
choose the body element here and as i
said before we don't need to set a width
of 100
but i'll put this in and i'm going to
set this to
100 viewport with units instead and save
now we don't really notice a change and
i have seen this on pages and i've even
done it myself but i figured out the
problem if we have a width of 100
viewport width units we do have a
problem when the content out the
vertical content outgrows the page and
i'll show you why so i need to go back
to the html
and in the html i'm going to quickly add
some more content so i'll say
paragraph times 10 and we'll do this
with
some just sample lorem text that's an
image abbreviation so when i press tab
it adds all those extra paragraphs and
save now we've got lots of content here
and now we have a problem and here's the
problem
our scroll bar showed up on the right
which is good we need that to see all of
this content but what also happened is
we had a scroll bar show up down here on
the bottom
and that is because our viewport width
when we set it to 100 as we did on the
body right here does not account for
this scroll bar on the right so as soon
as this scroll bar on the right shows up
and it shows up when our content
outgrows
our height
so when we need to scroll to see the
content is when this shows up as it
should
but then
that little extra bit that we can't see
creates this scroll bar so we can see it
and that's annoying and most developers
don't like that horizontal scroll bar
showing up
so if you were to set the width 100
would be much more desirable because now
we still get the scroll bar here where
we can scroll up and down vertically we
do not have a scroll bar on the bottom
and we don't usually want that but
overall as i've mentioned before we
don't even need to set 100 percent width
on the body as it should default to that
anyway i'm going to jump back to the
html and go ahead and undo all of that
extra content we added
and save so we're back to our normal
content for the page
let's go back to style as well
and let's right click once again on the
page and i just kind of i think i
selected the paragraph here so when
devtools opens up it should be on the
paragraph and we'll see that here in
just a second
yep i'm on the paragraph now let's
highlight the body notice the body is
not the full height of the page it only
grows with the content but sometimes we
want a body element that is the full
height of the page even if we don't have
enough content to do that and we can do
that with the viewport height unit and
i'm going to do that over here
in our code i'll choose the body element
but i don't want to set height because
that would also limit it to 100 vh and
then we could outgrow that if our
content were to outgrow what i want to
do is set the
min height to 100 bh
and save and now that will still allow
the body to grow with the content if it
outgrows the viewport but at the same
time it's now the full page and there
could be instances where you want that
remember to keep striving for progress
over perfection and a little progress
every day will go a very long way
please give this video a like if it's
helped you and thank you for watching
and subscribing you're helping my
channel grow
have a great day and let's write more
code together very soon
浏览更多相关视频
A CSS Unit Deep Dive - Learn CSS Units & When To Use Them
Why use REM Typography in Webflow
Learn CSS in Hindi with animations
CSS Course | CSS Position Property | Complete Web Development Course Beginner to Advance Tutorial 21
High School Physics - Metric System
CSS Grid Layout In One Video | Complete Web Development Course #26
5.0 / 5 (0 votes)