Skip to main content

What are PX & EM & REM

Lesson 45 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

What are PX & EM & REM

Lesson 45 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

45. What are PX & EM & REM

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Form Check Marks

03:04
74

Multi Line Form Text Box

02:18
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

11:18
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

Lesson Info

What are PX & EM & REM

Hi everyone this video, we're going to talk about why you can't use pixels for font sizes anymore. We're going to use REMS and ems and yeah, we'll look at the differences between them, how to calculate them. And in this video I get real self conscious about my accent. I feel like I have a really neutral accent until I start talking about reams and ems your like your you don't have a neutral accent and I feel like I do International man. Side note, do you know if I introduced myself in Ireland and I say my name is dan, they always say hi Dean, yep, I can text messages. Hey dan, I'll see you on the weekend. My name's dan dan. I'm daniel in Ireland, mainly stuff you don't need to know about. Let's get in Reims. Seems pixels. Alright, first up, let's close down what we're up to now. Just we're gonna move this in its own little document because we're going to do a little bit of an experiment. So let's go to file new. I'm gonna save this one and I'm going to call this one font craziness by h...

tml. Now we're going to be dealing with fonts because it gets used quite a bit for those but it's a measurement in general. Okay, you can use it to size boxes, let's add all of our regular doc type stuff down the bottom here, let's throw in a couple of things. Let's throw in two p tags. Okay, put your name in them, duplicate them now. Have we done duplicating before. If not we'll cover it again, You hold down the shift key and then you hold down on a Mac it's the option key on a pc. It's the key and then hit the down arrow. That duplicates the line you're on. Alright so we've got two of them. Let's call this one. What should we call this one? Let's give this one a class. Okay and let's call this one bad size. Okay. And this one here is going to have a class of good size. Alright. So at the top here we're going to style it, you should use an external style sheet but we're going back to old school, we're just gonna style it in the head here just to make it easy. Okay so let's start both of them up until now we've been doing we've been styling them saying bad style, bad bad size. Okay. Is font size Is let's say we want it to be I don't know 30 pixels. Okay. Unfortunately there's a bad size pixels are what's called absolute fonts. K they are the same on all the computers and they can't be changed their like you have to be 30 pixels is absolute font can't mess around with them. What we need is something called a relative font and that's where teams and rams come in. Okay. So let's let's just check what's going on first. Let's prevent browser close it, Make it open again. Alright so we've made him 30 pixels. So instead of using pixels let's do another font and let's do this one is the good size and this one here is going to have the font size of we're gonna use let's say three R. E. M's. Okay. Those are the used rims. There's ems and rims. We'll talk about the difference of two but rims is what we're going to be using and probably the most common contemporary common thing to use. Now let's see what they look like first and then we'll talk about what they are. So saving it proving the browser what I might do for this video is just have it here so that we can all see everything nice. Alright so three rims is bigger than 30 pixels. Why is that a rem or an M. Okay. We they have they're very common. They're very are very similar at least so three M. Or three rem doesn't matter. They are three of whatever the default font size is on the browser. So the browser if I put in a P tag with nothing in it. Okay so a P tag and I put in daniel scott down the bottom here. Okay there's the default font size. Okay I didn't style it. I haven't done anything to it. That is just a size. Okay and it is 16 pixels generally about that. Okay. Different browsers have slightly different looks to their font but google chrome which we're using is 16 pixels. Okay as its default font size. Okay 16 what a rim or an M does is it says I am three times whatever the default is. So three times 16 is all right. I can't do math about as well as I can spell It is so three rings at the moment. Okay, that is 48 pixels high. Why do we do that rather than that? Because we can just type in 48 and it should be the same. Right? 48 Pixels same size. Just type 48 heaps easier. Now, the reason we do this is for people that are that have a hard time seeing the site. Okay. So say that I am visually impaired and I just find that too small. What you know the default font size Way too small. I can go into chrome and say preferences and I can say actually in here I'm going to say I'm going to make it bigger. Okay, I'm gonna make it very large game and because that's what I need. Just what I need to see things, what you'll notice is very large. Let's go and check out our document. Now what ends up happening is this guy got bigger. This guy didn't remember they were the same size. Okay, let's check that settings. Let's put it back down. Medium. Okay, so they're exactly the same size. I've said Ub 48 and you End up being 48 but actually it's more just times in the default whereas I make it bigger. Okay, it gets bigger for me, You can see if I'm visually impaired. That is not good. This is great. Okay, so that's what happens. And that's the reason we, that google really wants to encourage it. Okay, so we'll use this so that people can use our site better. And one of the other reasons is that google will base your site on how accessible it is for people that need kind of some, you know, this extra help. So again, back to rankings if you're building a site you want google to love it so that it ranks you and one of its measurements. Okay. Along with a million others is is your site accessible to the people that need kind of these changes made. So that's why we use rims or teams watch this. If I change this three, uh actually let's go back to our regular size. Normal. Okay. And in here no one in here, the same size. If I change this through from reims or reems, it's not going to change. We'll talk about that next. The difference between reams and reams, but before then you need to get over my accent because reams and reams that probably sounds real bad. I know it's my accent and I know reams and reams sounds weird rims. Ems. There we go. Alright, this is going to be a bit of a brain bender. So let's get started. So let's got those two. Let's just get rid of this P tag here and save it. So it's gone. Okay, so let's say that I have got a P tag down the bottom here. Okay, tap it across. Mm hmm. Okay. And it's going to have a different word in here. It's gonna have pickle just because Okay, so this pickle I would like to give it a class of We've already got some classes I'm going to use let's say bad size, no good size. We don't want to use good bad sizes. So I've got good size so it looks exactly the same as the rest of these. But we know that on our website. We have body tags. But we also we never just have P tags hanging out by themselves, right there also inside containers which are inside main tags which are inside sections. So let's say this guy is inside attack. Okay. So I'm going to put a tag around the outside of him. I'm going to call this tag my box. Okay. And I'm gonna grab the div tag opens there and it closes on the other side. Tab him in. Make it all look pretty cool. We're okay with that. So I've got this guy is inside a div called my box looks the same. Now let's start as my box. My box. Alright folks, here we go. And let's say that's a good size. Bad size. Let's say we're using teams. Okay, so we're using games looks exactly the same. This is where the difference comes. Okay, I want my box though to do some stuff. Ok, It's going to do some things for me. It's going to say I am going to do two innings. So what ends up happening is they end up compounding. So my box is two M's and then good size applies itself as well. So you end up with five ng sort of like compounds up. The difference is if I just use rims so good size now if it's a rim, it ignores the wrapper tags size and just goes and says, I don't care what you do or what the rest of the world is telling me to do. I'm going to go right back to the source So our is route So route. Um, okay. It goes all the way back to the beginning and says, alright, the default still 16. So I'm three times 16. Okay. Whereas if you use ems you can end up with this weird like it's, it's not so complicated at the level we're at now because we don't have a lot going on, especially in this video, but even in our other websites, it's just not that big but when you get to frameworks and wordpress and big, huge things that you're using or trying to edit. It's sometimes you're just like, why are you so big or small? There's all these things going on if you make it a rim, it just says forget all the other things I've been told I'm just going to be three times the default now. Can you just use pixels? You totally can. Okay if you're like, man, that was like Narnia. I went, what is that inception? There's too much information. Things inside things. Rams Ems his crazy accent. You can just use pixels. Your website is not going to explode but we're just trying to be, I'm trying to do two things. One is, you need to be a good web designer. Okay for the visually impaired. And also you're going to run into these rooms and ems later on when you're working with other sites and templates and another useful thing is to know is it useful? It's with what sticks in my head and no, so what is three am say I want to pick a body copy size for this one here and I wanted to be, I don't know. I want it to be 20 pixels. Okay. Because that's what I designed it in, what is it in rims there are calculators online. You can do ends two pixels calculators or rims to pixel calculators. But weirdly my little calculator here, I can say if I wanted to be 20 pixels, I can times that by oh 6 to 5. Okay .06-5 write it down. Post it noted. Okay. And it will give you the rims or ems okay. Same thing. So that is what it's going to be. We'll use the proper ones rims. That is 20 points. Okay. So if I want it to be 48. Okay. I type in times .06-5 Again, three rims but that's probably not going to stick in your head like it has mine. So there are calculators just Google them. They're easy to do know that one is about 16. When I say about 16 different browsers kind of treat The default font size a little differently. You notice how Google didn't say 16 pixels? It said medium. Okay. Used to say pixels, notices medium. Alright. So I'm going to save and close this and we're going to go through and edit our big site now. So close this down. Make this bigger. Open it all up. My explorer. We need index style. Okay. Because we need to go back now and fix the things we did. Okay, so we did our font sizes. So what I'm gonna do is I'm gonna change my default font size from 16. Okay. To be a font size of font size Of, we've already looked at it. It was 1. rims. Okay. You could just put 1.1, like the .25. The extra 25 isn't really changing much. It's up to you, how how cool you are about that type of stuff. Let's have a little look. So all my default font size has gone up a little bit. Let's look at this one here in my XT document, it is 52. Okay, so in here I'm gonna find my H one and I say you, it is not what I want. Okay, I'm going to do what was it? 52. Okay. Remember 52 was so times point oh 6 to 5. Okay, so it's a little bit bigger than three rims. How much do I care about that? .25? Probably not enough to worry about, but let's put it all in dreams. Let's have a little look now and it is the right size save all. It's looking nice. At least it matches my mock up here. Now. One of the other things I just mentioned at the end of this is that when I'm looking at this design here, this font feels really light. Okay. Um, you know, it's displayed differently than it is on my website. Okay, where is my markup disappeared? No, it's over here. You are. So it just renders differently. So that is the right weight. Okay, because I have set up the top here and video visual studio code. Remember up here, I've said Roboto is 300. Okay, so it is displaying the right weight. The trouble is that XD will use roboto 300 differently than your website will. Okay. And the weird thing is is that if I look at this and safari and then on firefox they'll all do it slightly differently. It's kind of it bothers me as a designer and that fonts aren't looking exactly the same across lots of things, I guess that's the big kind of thing you need to let go of if you are coming from more of a traditional design background, that fonts sometimes just You just have to let things go because you can't force the aliasing of fonts. And one thing that kind of reminded me of is that we've only had one size in here, let's say that you do have to, there's 300 and um what is it? 300 and 500 and 700. So you got different sizes. We didn't implement them because we didn't have to. But let's say you do have different sizes that you picked in google fonts in here, you can go through and say actually want the body to use, it's this one here, it's font font weight. Okay. And you say actually I want this to be 600. Okay, and that's it. 600. It'll be a 600 font if you've got multiple options, I didn't have to because I've only got one. But that reminds me All right, let's move on, let's fix up all of this stuff whether we've been ignoring the gaps and spaces between. We'll do some petting space after paragraphs, all that fun stuff in the very next video

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles