Today we are going to discuss about the external styling. How can you create your external file? How can you embed your external file in your project or in your HTML file, so we have our index dot HTML file. And as you can see, we have a CSS folder in our F drive, make sure we have a single file and we have a single image. Now I'm going to create a CSS file or dot CSS file. Here, I'm saying that control and I'm saying Ctrl S Control S. And now I'm saying that is style dot CSS.
Make sure save this file in your root directory, which is the CSS we have created this CSS folder in your selection. Create, okay, now find what how can you embed How can you attach your CSS file in your HTML file or in your actual project? So I'm saying that link Real now I'm thinking style style sheet. And now I'm saying type text slash CSS. Now I'm saying okay, I'm saying style dot CSS, okay, we have a h1 Here we are going to call the h1 for suppose and say h1 selector and now I'm seeing color red, fine, perfect. Go to your file, click on your file or open your file as you can see you have successfully embedded your external is highly up source as you can see you have successfully married first of all, and if you are giving the wrong name of your file, so how And you debug your code.
Or suppose this file is not available in your root directory in your CSS folder, as you can see, okay, if I'm saying that this file is this file is not exist here. So now go to your page refresh the page. Now as you can see, it's not working. So how can you debug your code? Just right click Inspect Element console. So as you can see in the console, you have one error failed to load the results.
Okay, so in this way, you can debug your code. Okay, so now I'm saying that style of thesis now correct this, go to your page, refresh the page. Now as you can see, it's working fine. And you are and nothing is here. Okay, so first, okay. Now, first of all, if you have a folder in the root directory, or suppose I'm saying assets.
And you have this file inside here. First of all, you have a file inside here, how can you do that? Now I'm saying I'm saying go to the assets folder First of all, then find that style dot CSS folder. As you can see, you have a standard CSS folder here. Now go to your page, refresh the page, as you can see, it's, it's working fine. If you are giving the wrong folder name then definitely, it provides you the error or it will give you the error or sorta define upon you.
Okay, so how you're managing your code. So in this way, you can add your external file why we are using the external file, because this is a single file or suppose if you have a thousands of files of HTML or you have thousands of pages Use. So it's hard to use or it's it's hard to create or it's hard to define all the CSS and style in the header section. So that's why we are going to separate our CSS file from our HTML file. Hey, I think this is enough for you in the next lecture, we are going to cover some other topics like phones. So thank you for watching.