Hello, in this CSS Crash Course video, we're going to be looking at at rules. So why is an A to an app rule allows you to essentially use external resources from your CSS file. So first of all, let's just get rid of all of this code here. I'm going to all going to be doing the only code we're going to add in our HTML file is a div tag in here for Hello, will, exclamation mark. And now as you can tell, we've got a font file here and this font file, we refresh this we got the Hello World text. And if we go to index or CSS, remove all the code from here, save that refresh, we've got our text.

This font file I've just added is a dot TTF. It could be like a dot OTF or some other font file format. css supports quite a lot of fun file formats. I'm going to show Because this is an external resource to index CSS, how to use that using the Add rule, aka changing the font type, using an external form file of your own, you can download this from our GitHub page, there'll be a link via the resources. So check that out. Or you can just download anything dafont.com da fo and p.com.

Very good as well. So got index dot HTML. So did you know index dot CSS, actually, first, right click CSS folder, click New. When I create a second CSS, I'm going to put second foil dot CSS in here. We're gonna put some very, very basic code. We're going to put a div and I'm going to set a color to red so every div has a text color red for refresh.

Well, I think it is not working. Why isn't it working? The reason is, because we haven't included it here, but we can include it using an app. So to do that, we go to our index or CSS, you put at import URL, semicolon, then inside here, quotation marks, and then the file. If it's, if it's in a different folder, you can just put the folder name or dot, dot forward slash and go back a folder. Just basics or directory started.

Let's save that now. Zoom Out refresh. As you can see, the color is now red. So now, what we're going to do is show you how to use an app rule to use the form file. First of all, you need to create a font face. So you do at font dash face.

And in here, you set the font family, which is basically the name that you can use threw out your CSS code from after the font face, and you allow you to use this font file. So it's great. You don't need to specify The directory every single time just in case you change the form file, rename it, move it anything like that, you can just update it here for the font family. And we're going to say, awesome font, for semi colon for source source will equal to a URL, which is I think you can guess, the location of your file. This could be an like an online hosted fund for very common to get something out something like Google fonts. But we've got it locally fits an online file, you would just put the URL, I'm going to put font file dot TTF.

For us it is in the CSS folder. If it wasn't equal, just put the correct directory that's it now, now you would just put asterik will affect everything. We're going to say you font size to VM save that go back refresh this video. We haven't changed it. That's because we also need to set the font family in here. The font family in here doesn't actually name your font.

It specifies which font you want to use that you put awesome font. And we want various save that refresh. And it's not working. The question is, why did that not change? So why didn't it change? Let's inspect the element.

A couple of warnings failed to decode download the font parsing error, invalid version tag. Okay, for some reason, I'm guessing the fire lights font I downloaded was corrupt potentially, it would appear like something like that has gone on. So I'm just going to go to dafont.com should be okay when you download it, download it, I didn't download in the proper way I tried to do a shortcut, because I had messed stuff up. So I'm going to go, let's go to this one before vampires. Open that to do OTF. I'm going to copy that into here.

Copy and paste all of this into here. This is the future. We're just changing here and it changes everywhere that you're using it. Okay, there you go. We've got it working. Obviously, this is just part of it, because that's the way they done their font, but it could be whatever.

So that's how you use our tools to use external resources. If you have any questions, feel free to post them on my channel. platform. So now learn coder, UK or directly message us via Udemy. However you feel that you want to communicate that in fine Twitter, whatever is fine. Also, there will be a GitHub link as a resource which will take you to all the source code from every video in this series.

And as usual, thank you for watching and I hope you have a great day.