HTML & CSS for Absolute Beginners: Inline CSS and Internal stylesheets

Key Takeaways

[Music] so I want to talk a little bit about something that I don't want you to use which it's a bit weird to have this in the course but if you're looking at other U material you might come across things that are using either inline or internal CSS and those are some of the things that are often showing early on because they're a little bit easier than having a separate CSS file but it's not the way we normally work so I wanted to avoid it but because you might run into it when you're doing other tutorials or following other things I want you to at least have seen it and and know that okay that's one way of doing things but I should actually be working with an individual file like I'm doing right now and so if I jump on back over to my HTML file right here the first thing that a lot of courses or a lot of material will do is to show you something called inline CSS which is using a uh which is using inline style so I'm actually going to come here and and delete all of my CSS just so we have a blank slate that we're starting with and uh if I come in my H2 here I could say that this has the style is equal to and my color is I'll just say orange to make my life a little bit easier and you can see that one is changed over to Orange and then if you add another H2 you have to remember to put that same style there and that's if I have one property you might have seven properties you're trying to put on something and it just becomes a bit of a nightmare there are times where inline styles are appropriate but it's usually if you're using JavaScript to inject Styles which is an much more advanced topic that we're really not worried about right now so my rule of THB there is in General avoid using things like inline Styles so let's come back here and fix my CSS refresh that and there we go everything is back here the next thing though that I would say to avoid is when we have the internal stylesheets within an HTML document and the way we can do that is inside the head here what we can do is I can come down and I can make a style element in here and I I can actually write CSS in here so if I do a paragraph I can say my color is red and hit save and the advantage with this is it works just like having my CSS file over here where it has a selector so instead of having if I wanted to do this with inline CSS I'd be doing Style Style Style style like that's a nightmare you wouldn't want to do that right uh so this works the same way that my individual stylesheet does but the problem is it's only going to style things that are on this one individual page and it's very rare that you have one page of anything right we tend to have two pages or three pages or 100 pages on a website like we do now where we have a page two over here and if you did that you'd have to take all of these Styles and then paste them onto the second page and then if you had a third page you'd copy and paste them there and a fourth page and you'd copy and paste them over there but then you start running into another problem is what if you want to make a change well now you have to go on every one of your pages and change that same thing or you add a new thing you have to go through and add it everywhere and it becomes a nightmare whereas right now let's get rid of the red here cuz we don't actually want that everything is within this one CSS file so it's kind of weird at the moment this page is styled up but this page over here isn't styled up and we can easily fix that by just doing the same thing we did here on our other page so if we go over to my getting started we go all the way up to the top we can just come in and add a new link so link then we need an href is equal to and and a real and then a real is equal to and then we close the triangle bracket and then inside of there the first thing we can do is our stylesheet so we don't forget that part of it and then the link here points to the same thing so we go into our CSS file and then we can find our style. CSS and if I refresh this page all of the styles are coming through right away which is awesome then if I go back to my homepage everything is still working perfectly fine there but the advantage is if I come in and you go you know what I don't want my header to be this color anymore I actually want my header to be black or or inherit the color from my body so I make that one change here I refresh this page it changed color but then when I also go to the other page it's also updated there as well and in general websites are very consistent and this is the type of thing that happens and we want to use one shared stylesheet for as much of things as possible so this is the standard way to work it's why I avoid it showing you those other ones before cuz I didn't want to show you how to do that and then have to break those habits but again now that we know the right way of doing things I just wanted to let you know that those other things do exist in case you ever run into them while you're doing other tutorials or other things along the way