Name: Control HTML Elements with Different CSS Units
Uploaded: 2018-10-04T23:58:23-05:00
Description: When working in CSS it's important to understand the difference between absolute units like pixels and relative units like em, percentages, and rem. Let's apply these to a H1 element and see how they are calculated by the browser.

Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

When working in CSS it's important to understand the difference between absolute units like pixels and relative units like em, percentages, and rem. Let's apply these to a H1 element and see how they are calculated by the browser. 

https://app.egghead.io/api/v1/lessons/css-control-html-elements-with-different-css-units/subtitles

Instructor: [00:00] Let's go ahead and give our h1 a font size of 30 pixels, so they're 30 px, save and refresh. Using our DevTools, we can confirm that our h1 is now at a font size of 30 pixels. Pixels are referred to as absolute units, because they'll always be the same size regardless of any other related settings.

[00:21] With the font size declared, let's give it a padding of 2 em. Save and refresh. If we look at our h1, we can see it's got a bunch of padding around it. Em is referred to as a relative unit, because it depends on this font size here to calculate how much padding they give to it.

[00:38] If we look at the computed padding for this element, we'll see its associated pixels. That's because em goes off the font size. One em is going to be 30 and two will be 60.

[00:48] If we change our em to rem, and save and refresh, we'll see that our padding now sets 2 rem, and the computed padding is 32 pixels. This is because rems work exactly the same way as ems except for, it will go off with the default base font size and not the font size that's applied to the current element. The default font size is 16 pixels. That's why we get 32 pixels when using 2 rems.

[01:15] We can also use percentages inside of our CSS. We change our 30 pixels to 200 percent. Save and refresh. We'll see that our font size is now 32 pixels. That's because percentages are calculated after the parent size. For our font size, that's going to be the default size of 16 pixels, 200 percent of 16 is going to be 32. If we use the percentage on width or height, it would calculate the width or height, but the size of the parent's height and width.

Control HTML Elements with Different CSS Units

Share this video with your friends

Course

CSS Fundamentals