HTML & CSS for Beginners Part 9: External CSS

Key Takeaways

howdy and welcome my name is Kevin and we're at part uh let's say nine I guess 10 I don't know we're getting along there we've done a whole bunch of videos and we got a lot more to go we've just started looking at CSS we added some colors to our page now things are finally starting to get more interesting in this video we're going to start looking it external CSS which really just you know blows the walls off of what we just looked at in the last video so let's jump into it and start doing [Music] that all right guys so for this video what we want to be doing is uh moving all of our CSS to an external style sheet so what I'm going to do to start with is I'm going to delete uh all these inline styles that I have so these are there uh I have another color one here let's save that and refresh oh what happened to my H1 whoops didn't mean to take off the whole tag save that my first website there we go okay so we're back to this and what I want to do now is I want to make a new file so I'm going to do command n and I'm going to uh save it so I'm making a CSS file so I'm going to put this in my CSS folder that we created a while back and I'm going to call it style.css and hit save so now that I've saved my file I'm going to come back to my index.html and I'm going to go up to my head and in my head I'm going to to add in a link I'm going to tell it that this link is going to a style sheet and I'm going to get an H so my H hypertext reference is equal to CSS folder and in my CSS folder I have my style style. CSS save and uh that means I'm linking over to this file so the real is short for relationship so it's you know the relationship of this to this this is the stylesheet for my HTML document so I'm going to jump over to my stylesheet now and what I'm going to do is I want to select my body tag so now we used to before we used to yes in the last video so for longer we'd write style is equal to and I would apply my Styles directly in here we're obviously not doing that anymore we're in another file so have to be able to select my body tag so to be able to select my body tag I'm just going to write body like that there's no greater than or less than symbols or the triangle brackets aren't there I'm just putting body like this and what that is this is my selector I'm selecting body and then I'm going to do an open and close uh curly braces so in HTML we're using the greater than and less than symbol so the triangle brackets and I'm using these curly brackets uh in my CSS so I'm I've selected my body tag and then in here I'm going to write the CSS similar to how I wrote it when I was doing those inline Styles before so let's choose our background color and you can see now it's actually U adom here is autofilling for me and if you're using another code Editor to probably be doing the same thing and so it's showing me all of the different options I have for background and let's put in uh my black like I did last time 0 0 and save and I'm going to hit refresh and well we can't see the text so let's change the color to white and I'll save that and refresh so right away you might be able to see one of the nice things about this is the formatting makes it a little bit easier to read when we were adding them all in as an inline style so let's do it again style is equal to background color whoops background color black color white font size 21 pixels it starts you know if I have to find my font size or my color after it can be a little hard you're sort of reading around a little bit the way I'm going to style it here is each one is going to get its own line I don't have to style it this way the extra space is just for me I could do that and I could come here and do font size 21 pixels um Adam's doing a better job of color coding it here than it is over here where it's all the same color we won't be using that um so maybe it's a little easier but after each line I'm just going to push return on my keyboard I'm going to put each property on its own line and that way it just makes it a lot easier for me to go through and read it and make changes to it as I go this is the standard way you're going to see it on other websites we're also going to be doing other things we're going to be looking at the code in the browser and this is how you're going to be looking at it so we select something open our curly brace close our curly brace and each one of each property gets its own line and then gets its own value and very important at the end of each line we put our semicolon to end that rule even though they're each Going On Their Own Line If I forgot to put that semicolon it would be the same thing as writing this so my color white font size just like in the last video that doesn't make any sense so we need to end that property and then start the next one I'm going to save my file our font size should get a bit bigger now that's all fine in Dandy but we could have done that with our inline style we'd already done this in our with an inline style in our last video but one thing uh right away a nice power of having this external stylesheet is uh if I'm working on my internal so my inline say I wanted to make this orange like we did last time I think it was ff3 3000 and I forgot the hashtag at the start save oh I'm being silly color there we go oh I made it red that's okay so I have a nice uh red paragraph there but now if I want the next paragraph red well now I have to you know copy that paste it here save okay oh I have another paragraph and another paragraph and you know you might have 100 paragraphs on your website so you don't want to have to be doing this on each one and then my goodness what if you decide to change the color oh that would suck so let's just get rid of this and uh just like before I selected my body tag just by writing body there what I can come and do is I can put a p so I'm selecting my paragraph tags and let's do color see if we can get orange this time uh mean f F tror CC and refresh pretty close to Orange um and well look at that all three paragraphs changed at the same time this is selecting all of my paragraphs and changing all of my paragraphs isn't that fantastic and right away makes my life so much easier if ever I need to change this you know what maybe we'd prefer red I put that over I make that one change and all of my paragraphs all all change at the same time it's awesome I'm going to put this back because it's easier to read when it's a brighter color there we go uh let's come into our font size too just for fun um oh we don't need to do font size we already made that bigger uh I have my H1 up here so I can do that too I'll come here and do H1 oops H1 let's do a font size oops font size of 70 pixels to make it nice and big and color of pink and there we go so I can always select a tag just by writing out the tag here with no triangle brackets so I'm this is my selector I'm selecting this I'm selecting my paragraph I'm putting the curly braces and then I can go through and put my properties and change the properties to whatever I want them to by putting the value right there remember always end each line with your semicolon this is something that people forget sometimes so and it's an easy thing to miss it stops working so if you're wondering what's not going look for that first of all check your spelling spelling is often a thing that goes wrong uh if you're changing certain things like pixel values don't put a space here because that will also break them uh so my color is still working but the font size isn't same here everything else is working it just doesn't know what this is so I'm going to put that all Al together on the same line save refresh to get it back to how it was so right away you should be able to see that I can go much faster by using external stylesheet just because I can select lots of things at the same time I can select all three paragraphs we're going to see later on there's other things that we're going to be wanting to do that for uh it's much easier to look at our stylesheet and see what we're changing so we can easily more easily come in and make changes and quickly see okay there's my color or there's my font size or my background color and we're going to see there's lots and lots of properties so these can get quite long and it just makes it so much easier to read our own CSS than when we're using inline Styles another thing that's really really nice about an external stylesheet is well I have a page two so let's go over to my page two and right now it doesn't have any of the same Styles and generally all your pages are going to pretty much look more or less the same so all I need to do is come and I need to put this same link L on my page to so let's try that out and we'll do it all again the long way so I'm going to put my triangle brackets and write link re is equal to stylesheet I put a space hre is equal to CSS folder style.css I'm going to save that hit refresh and wow look at that they both have the exact same Styles pretty awesome if you ask me uh this also means that if I come to my stylesheet and let's say we don't really like this black background you're sort of sick of it we want to come in and change this to be uh let's go with a blue background Z 0 Let's go with like a ccff I think that will be blue and there we go and well I don't really like that font color anymore let's try and make that a dark blue see if I can figure that one out 0 that's right FF FF see what happens oh that's a bright blue uh actually let's just WR blue it's not going to be pretty but we'll be able to see our text and I don't like that pink title anymore I want it to be red uh well I made all those changes this page is looking good but what about my homepage whoa look at that my homepage changed all at the same time so external so you can see external stylesheets are super powerful they let us make really fast changes across our whole page really really quickly uh not across our whole page but across all of our Pages very fast so I really really recommend use your external stylesheets they're also sort of standard across the web because they're awesome compared to all of our other options uh so I recommend that you get used to them now one thing you don't want to be doing is mixing up internal and external so uh or in line I should say so let's just say I came here and I actually want this paragraph to be different so I could come in and do style is equal to color [Music] black save that and well now I have a black paragraph and my other ones are blue and maybe that's what you want H we're going to look at another better way of doing this one of the problems with doing it this way is I'm going to you know you save your site you come back a few weeks later and then you're going okay why why is this paragraph black and you're looking at your CSS and your CSS files probably be much bigger than this cuz you're going to have a really nice website by then and you just can't figure out how you made the that black and you're sort of pulling your hair out and then eventually go wait a second and then you come back and you're looking at your HTML and you see this and you start swearing at yourself because it took you so long to figure out if you start putting Styles in a whole bunch of different places there's no way you're going to remember where they are it just makes maintenance of your site really really hard so we don't do that all of our Styles stay here so this is going to control the look of our website it's the colors the fonts the layout of the website and the HTML is the content of our website and they're two separate things and we want to keep them as separate as possible so that's it for this video I hope you liked it uh I hope you've picked a better color scheme than what I've come up with so far if you're following along I'm super glad that you've made it this far if you have any questions or if you just want to say hi make sure you go down to the comments and do that right now like the page if you like the video and next video we're going to be looking at divs and span so we can actually start manipulating our layout a little bit see you then