Lessons

Lesson Info

Change the Font Size & Color

Hello there fellow web designers in this video. We're going to go from this to this. Okay removing the background adding some text, starting the text. Looking at font families. We're going to look at padding from the outside and the top we're going to look at the difference between padding and margin. Whoa loads to do in this video. Let's jump in and get started. All right so we're gonna put it in our text and get it kind of looking like this In case there's an H1 and then there's AP. Tag. So let's grab the copy, I've put it in your exercise files so find your exercise files and then project one there's one called project one text. Open that up in something and yeah we've got some stuff in here so what we want is let's meet and let's bring in that first. Okay it's all lower case. Just the looks you can add the upper cases if you like and then we'll bring that in a sec. So let's jump into V. S. Code where do we want it? I want it to be we're skipping the non if you'd be like hey let's d...

o the nav we'll we'll do the easy bits first and we'll move into us we're building on our skills let's say So each one tab for over 10 and paste on that text save. Let's have a little look in the browser there it is. Let's meet. Okay let's add the P. Tag P. Tag and let's grab the text copy, paste it in. Now this brings up a good point. Okay so let's save it in preview and make sure it works. Where are we? There you go. It's in there now in code view. This can whether you like it or not and I'll show you something that I do. So the text kind of goes off and see it on the bottom here. There's lots of text, so you have to kind of scroll across, it's up to you whether you want to leave it like that because I feel like this is there's pros and cons of both. I'm going to delete that to the P tag. Come on, delete, I'm hitting my delete key Because there you go, it's all on one line. There you go. Nice. Like the H1, it's a pdf all on one line, you might like that, a lot of people and me included, I flip and flop so I'll show you both is I want that to wrap around. Okay, one thing I want you to notice is that every new line starts with a new number and that makes it quite clear. So on line 22, even though it's quite long, It's all online, 22, but if I get a view and I do this one here, toggle word wrap, okay, can you see it opens up a gap in the numbering because that's technically still that next line, but it's just kind of wrapping it around because it depends on how wide, you know why the spacing is, know what I mean? So it's up to you, I'm going to wrap mine but you might not like that. It's easy to turn it off by clicking that exact same button. Alright, so now we need to style both of these guys and then add some padding because that was bold and it's white and it's not times new roman. We're using aerial in this case and you can see there's some padding in from the edges, whereas at the moment you see it's running all the way along plus we need to center it. So let's do all those things. So over here in my CSS H one, we're gonna put in curly braces and we're going to do, we'll start with font size, font size when you're building it, you're going to spend a lot more time going, oh, is it 40 or maybe 60? And just testing, because I've made this class for you guys already already know it's 84. Exactly. Okay, so let's test in the browser, you'll get into the habit and then out of the habit of just trying to do all of the styling, you know, you'll go in here and you go, okay, now it needs color of white white and then you do the next thing and then the next thing without checking and then you'll check and something will be totally wrong and you will have no idea what part of your code you actually broke. So my advice, especially at the beginning is to do one thing, Go check it, then come back in here and do another thing in this case kind of a big fun with this that we haven't done yet is the font family. So think of it as you're changing the font or the type. Okay, from these default ones, we're gonna use the default ones for the moment. There's not very many, but we'll look at expanding that as we go through. So what I'm going to use is with Ariel, I'm going from times in roman to aerial Helvetica, sans serif. Let's hit semi colon, let's save it. Let's preview it. Cool. So instead of it being times in roman. Okay, let me turn that off and I'll show you how I do that in a second. So times your own with all the little feet. Okay, this is called a serif font, so it has the little bits to hang out the side and if I changing aerial, see no little feet. Okay, it's a sans serif. So without defeat. Did a couple of things there, one was would be commenting in a second. This one, this is kind of weird. Why is there three fonts, you know, so you want Helvetica Now, what we're doing here is we're using what's called a default font. So what's happening is you're not like putting Ariel into this website. What's happening is let's say I built the site and our friend bob okay, bob loads your website. What happens is his browser goes in and checks his system so checks bob's computer to see if he has a real and loads it. If he doesn't have Ariel, it'll check for Helvetica. Okay. And if you can't find Helvetica, it'll look for this. Every computer has at least sand saref. It's like the default font for the core of the machine. So that's yours. You're suggesting I suggest Ariel, but if you don't have it, I suggest Helvetica. If you don't have it, I suggest san serif. That's why when you see some of these longer ones we picked area because it's easy, but let's delete all that type family colon, family space return now, yours might not have done that. I guess I skipped over that as well. Let's go back. So when I'm typing in the family, Okay, instead of hitting the colon, I click on this because it gives me all these cool suggestions. So looking at these guys, can you see gill sans gill sans mt calibri, Trevor Shay, there's lots in that list there. Right? So it's saying check bob's computer for gill sans if he doesn't have it have gill sans Mt? If it doesn't have that, put in calibri doesn't have that Trevor shay, it doesn't have that, I give up and use the default font size, sand saref and you'll notice that some of these are white and some of them aren't, some of them have these little marks around them. Some of them don't um single words don't need them. Words or fonts that have to like a space in between. Need these uh apostrophes. I'm going with apostrophes, little tiki things. Okay, so I'm going to go back to Ariel because you could write in here, say you're you're you're a designer and you're like man, I would love some who I was going to say lust, It's a fun. I was using today out of context is not a Alright, you know what I mean? Let's pick a more less suggestive font. What do we got? Comic sands. Okay, you're like your comic sans lover. Okay, you can type that in there and it will probably load on most computers because most computers have comic sans, but if it doesn't it'll have gill sans and then calabria, you get what I mean now. Right, so I'm gonna get rid of all of that and start typing an aerial, make sure the semicolon goes at the end and that's what it's going to do. The other thing I snuck in there and I didn't mean to, I feel like this should be later in the course, but we've kind of opened that box, is that I highlighted this and I wanted to turn it all off because at the moment, right? It's working, it's Ariel. So if I want to disable this, I can do a sneaky trick rather than deleting it and then saving it and then checking it. You can kind of disable it momentarily. Okay. And basically you need this syntax, you need to put a forward slash in front of it. This is for CSS only Okay. You need to put a forward slash then you need to put your asterix which is tied up with your eight number eight key on your keyboard and kind of the reverse of that at the end. So if you if you put that around anything, okay, so ford slash apostrophe and at the end of it apostrophe apostrophe, that's not apostrophe. Okay, that is your asterix, sorry, asterix for slash. Can you see as long as it's inside of that little group of characters, it will turn it off goes green. And the brother doesn't know it exists anymore. Okay. And it's just a handy trick but you would have also noticed that I did it super quick. There's a shortcut so it's a bit early for these shortcuts but we're already there. Right? So what we do is we highlight the bit we want to turn off. Okay? And we hold down the command key on a Mac or the control key on a pc and click hit the forward slash button. Okay. On my keyboard. It's down down in the bottom right of my keyboard. Yours might be somewhere else basically looking for this key. Okay, so hold the command key and click it and would automatically do it. It's really handy highlighted command for slash control for slash all right. So let's move on and do the P. P. Tech soapy this one here. What do we do with this one? We did font size. I want all of this. My lazy brain says just copy it. Okay. But the size is gonna be different. We want the size to be 18 pixels and we leave the color and the font. Let's check it. So there's now 18 pixels. It is a real and it is right now the next thing I want to show you is we could now go through and say because we want it centered right to match this. We want it all in the middle. So what I could do so I can go into my dress code and I could say we did this one and this one makes a lot more sense. Text align center. Perfect. And we've done it for the H1 and it's done But it's not done for this bottom one. Okay. So it's not centered. So what we'll do to be because it's all about being economical with your code. Do it once rather than you're doing it like 10 times. So the same thing remember earlier on we did the container we did auto left and right on the thing that wraps everything up. We do the same thing for this. So what wraps all of this up? It's that main tag. Okay. So where it is main. So if I do the same thing for that. I say you my friend everything inside of you be text align center, it'll do the same thing. It doesn't really matter. But we're looking for like style points as a front end designer. Okay. So that's working, that's centered, that's centered. Let's work with the padding because I want a big chunk at the top and a big chunk on the sites. Now we could do it to the specific type again but we'll do it to the container. Okay. So we'll use we'll add some margin to that main tag. So we'll do main we'll do padding. Okay. And we're going to use padding to the top And what I wanted to be. I've already worked this out. 80 pixels. Okay. And let's check it Awesome. So there's 80 pixels padding at the top and let's do it for the left and right. So padding lift In this case it is 240 2 even pixels and make sure it's semi colon at the end and do the same for right. Nice. Alright. Let's give it a test to see if we've broken it sitting at the top depending on the sides. Nice. Now throughout this course we're going to be looking there's kind of two ways of putting spaces in there's padding and margin and this is a it's a really good I guess way to show it. Okay. The difference between the two. So what we'll do now is main. We've done padding. Let's do the difference. So instead of padding top we'll do margin top because it can get confusing like which one do I use and sometimes it doesn't matter. So let's let's show at the moment because it's it makes it really clear. So I've done margin top instead of padding top, look what happens, it works. The text is just as far down from that red box as it was for padding except margin is the outside of this box because we see it main be orange margin. Okay, Top pushes it away from the top of the box. The whole orange nous comes down whereas padding is the inside of the box the internal parts. Okay, so the text will end up at the same place but padding is the inside of the box, so the orange. Okay, do you get what I mean is let's have a look. So text same place. Okay, but the box reaches to the outside margin pushes the box down so let's add a little bit more. It's at margin top and padding top to hopefully clarify it. I feel like I've almost explained this right, we'll do this a few times. So let's do let's do another 80 pixels. Just hopefully solidify this idea. Can you see there is 80 pixels there on the margin and then there's another 80 pixels here. Just afterwards for this, there's a little bit more here because this, this font here has a little bit on it by default. Okay, so there's probably padding on the top of this H one by default which will turn off later. But do you get what I mean? Margin? The outside padding on the inside. And then I also said sometimes it doesn't matter and it doesn't matter when you get rid of this background color because we only use this background color. Right? And to just to kind of identify these boxes, I don't want a big orange box or a blue box. So what we'll do is in your margin. Let's delete this. Goodbye. Okay, save it. Have a look. That's what I want. Okay. And now if I had imagined margin or padding, you can see it wouldn't make a lick of difference. Ok? Because the text would end up in the same spot and because there's no background color, you get what I mean, Dan You've said it 10 times now. All right. We got it. If you haven't, we'll do it again later on while we're here we'll get rid of the logo background. So where is the header in the background colour of blue? Delete it. Here we go. Alright, last thing before I go when I teach this thing live and there's always one in the class, you might be that person. Okay? People forget to put the PX and save it and you're like, hey, it's not working. I'm changing in the numbers and I'm making it up and down and it's not working. It's just because you forgot the PX because it's not something natural. All right. So there we go. Don't forget that. All right. That is it for this video? I'll see you in a second in the next one.