CSS Units & Sizes Tutorial for Beginners

Summary

In 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

00:00

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

05:01

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

10:01

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

15:01

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

20:02

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

Keywords

💡CSS Units

CSS Units refer to the different types of units used in Cascading Style Sheets (CSS) to define measurements such as length, size, and font-size. In the video, the tutorial focuses on explaining the most common CSS units like pixels (px), percentages (%), ems, and viewport units, and how they are used to control the visual presentation of web elements.

💡Chrome Web Browser

The Chrome Web Browser is a popular web browser developed by Google that is used to access and display web pages. In the context of the video, the Chrome browser is used to demonstrate how changes made in the CSS file are reflected in the browser, allowing for real-time preview of the web page's design and layout.

💡Visual Studio Code Editor

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It is highly customizable and supports a wide range of programming languages, making it a popular choice among web developers. In the video, VS Code is used as the editing environment to write and edit CSS code.

💡Live Server Extension

The Live Server extension is an add-on for Visual Studio Code that allows web developers to run a local development server with live reload feature. This means that any changes made to the HTML or CSS files are automatically refreshed in the browser, providing a seamless development experience without the need to manually refresh the browser window.

💡Pixels (px)

Pixels (px) are the smallest unit of measurement on a screen, corresponding to a single dot in the display. In web design, pixels are often used as a unit of measurement in CSS to ensure precise control over the size and placement of elements. However, using pixels for font sizes can make text less adaptable to user preferences and different screen resolutions.

💡Percentage (%)

Percentage is a CSS unit that represents a fraction or a part of another value. It is used to define the size of an element relative to its parent container or the browser window. Percentages are useful for creating responsive designs that adapt to different screen sizes and maintain the layout proportions.

💡em

The em unit in CSS is a relative length unit that is based on the current font size of the element. It is used to create scalable and responsive designs where the size of an element is relative to its parent's font size. However, using em units for font size can lead to compound scaling if used recursively, which can cause unexpected results.

💡rem

The rem (root em) unit is a CSS unit that is based on the font size of the root element (html), making it a scalable and flexible unit for typography. Unlike the em unit, rem sizes are not affected by the font size of the parent element, ensuring a consistent and predictable scaling of text and other elements across the document.

💡Viewport Units

Viewport units, such as vw (viewport width) and vh (viewport height), are CSS units that define an element's size relative to the dimensions of the viewport. These units make it easier to create responsive designs that adapt to the size of the device's screen, ensuring that elements scale proportionally with the available space.

💡CSS Box Model

The CSS Box Model is a design concept that describes how elements are laid out on a web page. It consists of the content, padding, border, and margin of an element, each of which can be controlled using CSS properties. Understanding the box model is crucial for web developers to create precise layouts and manage the spacing between elements.

💡CSS Reset

A CSS Reset is a technique used to reduce browser inconsistencies in default styling by resetting all element styles to a common baseline. This allows developers to start with a clean slate and ensures that their own CSS rules are applied consistently across different browsers and devices.

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