Hi, my name is Stefan Dworschak. I'm one of the developers here at Code Institute. Today we're going to talk about how to link CSS documents to HTML.
However, before we do that, please follow, like, and subscribe. And please enjoy the video. Let's look at an example of how to link a CSS file to a HTML document.
As you can see, I have just a blank HTML page already prepared here with a heading in it that says "hello world". If I look at it in the browser, you'll see that this is unstyled. It just says "hello world", and it's not very appealing.
So, we want to apply some CSS to this page now and we've seen or we've heard that you can do that by linking an external stylesheets file in the head element. So, I'm going to add a link element in here now, and that link element should have two attributes. One is the Rel attribute, which defines that this is a stylesheet, and the second is the href element, that defines where the location of the CSS document is.
And I'm gonna, as I said, this is in or this is gonna be located in assets CSS styles. css. So, I'm just gonna follow that link.
So, I'm gonna say assets CSS Styles and CSS and you can see that I can just tab to auto complete this because it finds the location. I'm going to save this, and I'm going to reload my web page. It's actually not doing anything because I haven't set any styles but if I add something in here now, for a heading, I can for example, change the color of the font to let's say red.
And if I save this again and refresh my page, you can see that the color has updated. And I can not only change the color, I can basically style my whole page with CSS to make it as appealing as I want. CSS tells your page how it should look in the browser.
It brings much-needed style and puts in place colors, text, Styles, and much more. So, this was our video on how to link CSS to HTML. Why don't you try this out for yourself with our five-day coding challenge?
Find a link in the description below, and before we leave you, follow, subscribe and like.
