Video Summary
Alright guys, we’re gonna go over. We’re gonna start playing around with the units of measurement and when and where we can use them. We’re gonna talk about, you know, the pixels, the EM the percentages and the view heights of us. Now, when we talk when we start talking about percentages, and view heights and view lists, I’m going to hop over and share this cool feature that we can use with browsers like Google and Firefox.
They’re really set up for developers. And I think just showing you on a live website, what we’re going to get into as well is really going to help you understand things moving forward. So with that being said, let’s just hop in and we’ll go over what we can within code pen and when we can’t, we’ll hop over to coolers Alright, so right now, let’s just talk about font size. Now font size is applicable for only the pixels and the EM. So the reason why that is is that when you’re talking about fonts, talking about paragraph, you’re talking about headings and the font size is relative to each character. So this like with CSS, this is all 30 pixels.
So it’s hard to base it on percentages, because you’re taught if you an even if you did based on percentages, you’re talking about such my new you know, potentially maybe you’re talking about a percentage of what the whole where each character is relative to the page. And that’s just so hard and so complicated, understand verses of like if we just say it’s 30 pixels, we can change that. We see how large the font size is. And now we can raise it or lower it as we need to see, we could say this could be 130 pixels, and they’re like oh, that’s way too big. Let’s just try 13 pixels. Oh, that’s too small. And maybe here’s looking at the font as it is now. And you go you know what? I would like to double the size of this. What does that look like?
And now you’ve just doubled the size. Now if you want to go say 20 to em. Now, it’s just absolutely massive and you can’t even work with it. Alright, so that’s where like the pixels em work with the font size. Now, but here, but while we’re still here, let’s talk about we’re going to talk about a new thing called width. And that’s just basically saying how wide you want are the property of the element of width. So that’s basically saying how wide you want us. And now with this, you can set this up in pixels. You can set this up in percentages, and you can set this up in view this alright. So what we can do here is we’ll just say let’s make this 500 pixels.
Alright, so this is how wide 500 pixels would be. Alright, now, let’s try 50% Alright, so that’s 50% of what have 50% of the page right? Now this is very this is why I’m gonna hop over coolers here in a second to show you the view West because if we do 50 view, Wes, right, is it nothing changes is exactly the same, because we’re not setting up columns and all that stuff yet. So and we’re not and what’s nice about WordPress is we’re not gonna have to code that at all. We’re not gonna have to worry about how we’re going to set up and size columns. That’s already built into the page builders I’m going to show you in like later sections. So for me to end up putting in a whole like a bunch of other HTML code, and then a bunch of CSS code to get it to where I could show you the difference. I think would just kind of convoluted and quite frankly, might confuse you, right, we’re starting off I mean, I started right where you’re at, and I wanted to take it, you know, step by step and baby steps. And if there’s too much out me too fast, then you know how to get lost. So the idea is just understanding the view widths and the percentages and difference between all of them. Okay, so we’re going to come over here, and I’ll just start off as already, I was already playing with this. And you can do this on all websites as long as you’re using the right browser. Now, Safari, I don’t think has has that option, but I know Google and Firefox do. And I personally use Google as my browser just because it ties into all my business and my gmail accounts.
But either one works, so if you come here and you right click or double click if you’re on a Mac, click Inspect. And basically what happens now is you have, you can start looking at all the HTML code that happens on the screen, and the CSS that happens with it. So the HTML is here, and the CSS is here. Now, I’m going to get into this in another section, so don’t worry I’m going to break this down piece by piece. But for now, what I want you to do is if you if you want to follow along, if you see this little pointer, if you click there and now you can hover over these different elements and you can see you know how they set every one of these up for right now I’m just going to click on this one where I have the a homepage products, because this is very similar to what I was talking about in the previous slides.
And like as you can see, when we’re starting to learn, here’s all of the different lines of code that they have to offer CSS code that they made to make this look like this. Okay, now for here, I put in with and let me just delete this real quick. So let’s say I, let’s just try off by starting off with pixels. Alright, so we’re gonna do 50 pixels. Well, that’s not very large. So it changes the size on all of these. What about 50%? Let’s do 50% on us. So 50% is a little bit different than 50 pixels, because there’s different columns. But basically what we’re seeing with 50% is, is that within this column that there’s this little card or features designated and this is iOS app, right?
This is 50% of the width. That has in that space. And if we come back over here, and we don’t do this, and we come over here and we say if the this right here, this is the column we just, we just said this is 50% Right? Here, right? That’s what that 50% means. Alright, so now if we come back over here, and we put this back on, and what we’re gonna do, we’re gonna do a view with All right, so now basically what that saying is and the reason why you can’t see anything is that each section now is 50% of the length of the relative size of this screen. Okay. And also to is we can take this and my own responsibility. Yeah. So yeah, that’s so so now if we go, we can change the size of this. Let’s go to here, right. So now this is 50% of the size of a normal. I like this is like a mobile version. This is the mobile viewing right? So we said that’s 50 view width. So that’s half of the screen size. Now that’s a hell of a lot different from when we’re looking at it from here, right? That’s massive. Versus of we’ve came here and we did let’s go back and show you that version of percentages again.
percentage. So now if we come here and we go back to the mobile version, right, it looks fine here, but it also looks fine here, right. So as you can see, the actual view lesson view heights are the the actual percentages change on how wide the screen is. So these like if we were moving this it would change verses of the width and the percentage is just relative to wherever that elements being placed in. Alright, so I hope that helped. Also to is actually while we’re here, let’s just take let’s just take this and let’s do an E M version while we’re on like a live or on a live web page.
So right here they have they’re, they’re claiming that the font size is 70 pixels. So what we’re gonna want to do is instead of doing 70 pixels, let’s just do let’s do three and maybe that’s not good enough. Maybe we don’t like that much do five.
See if that’s how you can potentially play with setting it up with size. Now, also to is I’d rather come in here and say, you know, that’s kind of cool. I rather have the 70 pixels because I know exactly how big that’s going to be no matter what the screen sizes, but certain people will use different different units of measurement and that’s how you account for it so that being said, let’s hop over the next section, and learn more about our CSS properties.