How to change the font style size & color of h1 p in HTML CSS

Hello there, fellow web designers. This video we're going to go from this to this. We're moving some background, adding some text, styling the text, looking at font families. We're going to look at padding from the outsides 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. 

So we want to put in our text, and get it kind of looking like this. So there's an h1, and then there's a P-tag. So let's grab the copy, I've put it in your Exercise Files. So find your Exercise Files, and in Project1, there's one cold Project1-Text, open it up in something. And yeah, got some stuff in here. So what we want is, ‘let's meat'. And let's bring in that first. All lower case, just for looks. You can add the upper case if you like. And then we'll bring that in, in a sec. Let's jump into VS code. 

Where do we want it? I want it to be-- we're skipping the Nav, you'd be like, "Hey, let's do the Nav." We'll do the easy bits first and we'll move into-- we're building on our skills, let's say. So 'h1', tab, hit 'Return', and paste in that text. Save, let's have a little look in the browser. There it is, 'let's meat'. Let's add the P-tag, and let's grab the text. Copy, and paste it in. Now this brings up a good point. So let's save it and preview, make sure it works. There you go, it's in there. 

Now in Code view this can-- whether you like it or not, I'll show you something that I do. So the text kind of goes off, and see down 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 for both. I'm going to delete that, so the P-tag, 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 P-tag, all on one line. You might like that. 

A lot of people, me included, I flip and flop, so I'll show you both. Is I want there to wrap around. 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 on line 22, but if I go to 'View', and I do this one here, 'Toggle Word Wrap', can you see, it opens up a gap in numbering, because that's technically still that next line, but it's just kind of wrapping it around, because it depends on how wide the spacing is. You get what I mean? It's up to you, I'm going to wrap mine but you might not like that. It's easier to turn it off by clicking that exact same button. 

All right, so now we need to style both of these guys and then add some padding, because that one's Bold, and it's White, and it's not Times New Roman, we're using Arial in this case. 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, h1. I'm going to put in curly braces. We're going to do-- we'll start with 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, I already know it's 84 exactly. 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'll go in here, you'll go, "Now, it needs some color of white." And then you do the next thing, and then the next thing without checking. 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 changing the Font or the Type from these default ones. 

We're going to 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 Arial. I'm going for Times New Roman to Arial, Helvetica, Sans Serif. Let's hit semicolon, save it, let's preview it, cool. So instead of it being Times New Roman-- Let me turn that off. I'll show you how I do that in a second. So Times New Roman with all the little feet, this is called a serifed font. So it has the little bits that hang out the side, and if I changed to Arial, see, no little feet. It's a Sans serifed, so without the feet. 

I did a couple of things here, one was, we'll do commenting in a second, this one, this is kind of weird, why is there three fonts? Say 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 Arial into this website, what's happening is, let's say I built this site, and our friend, Bob, Bob loads your web site. What happens is, his browser goes in and checks his system, so checks Bob's computer to see if he has Arial, and loads it. If he doesn't have Arial, it will check for Helvetica, and if it can't find Helvetica, it will look for this.

Every computer has at least Sans Serif, it's like the default font, for the core of the machine. So that's the-- you're suggesting-- I suggest Arial, but if you don't have it, I suggest Helvetica, if you don't have it I suggest Sans Serif. That's why, when you see some of these longer ones, we picked Arial because it's easy, but let's-- we'll delete all that, Type family, colon. Family, space, hit 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 a family, 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. Trebuchet, 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 Gills MT, if he doesn't have that put in Calibri, doesn't have that, Trebuchet, doesn't have that, I give up and use the default font, Sans Serif. 

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. Single words don't need them. Words, or fonts that have two, like a space in between need these apostrophes. I'm going with apostrophes, little tricky things. I'm going to go back to Arial You could write in here. Say you're a designer and you're like, "Man, I would love some, I was going to say Lust, that's a font I was using today. Out of context is not a-- you get what I mean. 

Let's pick a more, less suggestive font what have we got? Comic Sans, you're like a Comic Sans lover. You could type that in there, and it will probably load on most computers, because most computers have Comic Sans, but if it doesn't, it will have Gill Sans, and then Calibri. You get what I mean now, right? So I'm going to get rid of all of that, and start typing in Arial. 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 it's working, it's Arial. 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. Basically you need this syntax. You need to put a forward slash in front of it, this is for CSS only, you need to put a forward slash, then you need to put your asterisks, which is tied up with your 8, number 8 key on your keyboard. And kind of the reverse of that at the end. 

So if you put that around anything, so forward slash, apostrophe, and at the end of it, apostrophe. That's not apostrophe. That is your asterix, sorry. Asterix, forward 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 browser doesn't know it exists anymore. It's just a handy trick. You would have also noticed that it's 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 you highlight the bit we want to turn off, and we hold down the Command key on a Mac or the Ctrl key on a PC, and hit the ford slash button. On my keyboard it's down, down the bottom right of my keyboard. Yours might be somewhere else, basically you're looking for this key. So hold the Command key, and click it, and it would automatically do it. It's really handy. Command, forward slash, ' Command / ' Ctrl forward slash, 'Ctrl / ' 

So let's move on and do the P-tag. So, P, this one here, what do we did with this one? We did font size; I want all of this. My lazy brain says just copy it, but the size is going to be different, we want the size to be 18 pixels. We'll leave the color and the font. Let's check it. It is now 18 pixels, it is Arial, and it is white. Now the next thing I want to show you is, we could now go through and say, because we want it centered to match this, we want it all in the middle. So what I could do, so I can go into my VS 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, 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 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'll do the same thing for this. So what wraps all of this up? It's that main tag. So what is it? Main. So if I do the same thing for there, I'd say, you, my friend, everything inside of you be text-align:center. It will do the same thing, it doesn't really matter, but we're looking for, like style points as a Front-end Designer. So that's working, that centered, that centered. 

Let's work with the padding because I want a big chunk at the top, and a big chunk on the sides. Now we could do it to the specific type again, but we'll do it to the container. So we'll use, we'll add some margin to that Main tag. So we'll do Main, we'll do Padding. We're going to use padding to the top. What I want it to be? I've already worked this out, it's 80 pixels. And let's check it. Awesome. So there's 80 pixels padding at the top. Let's do it for the left and right, so Padding, Left. In this case it is 240 pixels. Make sure it's semicolon at the end. Do the same for right. Nice. Let's give it a test, see if we've broken it; no. 

Padding at the top, padding 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. This is a really good, I guess, way to show it, 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? Sometimes it doesn't matter, so let's show at the moment, because 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 said, main, be orange. Margin top pushes it away from the top of the box. The whole orange-ness comes down, whereas padding is the inside of the box, the internal parts. So the text will end up at the same place, but padding is the inside of the box, so the orange, do you get what I mean? Let's have a look. 

So it takes the same place but the box reaches to the outside. Margin pushes the box down till it's a little bit more, it's at Margin Top and Padding Top to hopefully clarify it. If you're like, I've almost explained this right, we'll do this like a few times, so 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 font here has a little bit on it by default. So there's probably padding on the top of this h1, by default, which we'll turn off later, but do you get what I mean? 

Margin on 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? Just to kind of identify these boxes, I don't want a big orange box or blue box. So what we'll do is, in your margin, let's delete this, goodbye. Save it, have a look, that's what I want. 

Now if I had added margin or padding you can see, it wouldn't make a lick of difference, 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, was it Header, the background color of blue. Delete it, here we go. 

All right, last thing before I go, when I teach this thing live, there's always one in the class, you might be that person, people forget to put the px in; save it. And you're like, "Hey, it's not working, I'm changing in the numbers, I'm making up and down, and it's not working." It's just because you forgot the px, because it's not something natural. 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.