Hi there, this video is all about separating our Style sheet, by taking it all out of the html, and we put it up here in the Head. I'm going to remove it and put it in its own document, and connect the two; it's pretty simple. Let's jump in and do it.
It's pretty simple to create a separate or external CSS Style sheet. We're going to work with-- close down anything you got open from previous part of the course. So it's nice and open, or empty. If you can't see this, click on that first tab here. If you can't see anything in here, go to 'File', 'Open', and find 'Project 0'. It's a folder that we made, click it open. You should see all the files. We're going to work on the divtags.html
Doesn't really matter which one. So, we put this one here. What we've been doing is we've been half cheating, it's not even cheating. We've got the Style, all the CSS in the Header of the html. And that works, there's nothing wrong with it, except it's a bit painful if we have 20 pages. Say we have 2,000 pages, each page has a Box1. We'd have to write Box1 on all of our separate 2000 pages. And if we wanted to change it, it just wouldn't. If the client came back and said, "Can you make it red", you're like, "No, there's 2,000 pages that I need to open and go and change." So what we want to do is put it in a separate sheet, and our 2,000 pages can reference that one CSS sheet. So we can change it once on the CSS sheet, and the html will go looking for that one sheet and update all nicely in one go. It's hard to explain, let's just actually do it.
So first of all what we need is a CSS document. So let's go 'File', let's save. No, not save, let's go to 'File', go to 'New File'. All right, let's 'Save' it now. The difference here is, we're going to call it, we can call it anything we like, as long as there's no spaces. So we're going to call it 'Style', but we could call a 'Style', 'Styles', plural, What else does it get called? What else? Just don't think of other generic names, You can call it anything, I can't think of any other. We'll call it Style. Style, and it's going to be .css
Let's click 'Save'. Basically what I want to do is copy and paste the style from this document to this document. So we got two tabs open. So from this document what do we need? We need-- we don't need the Style tag, this Style tag is in here just to tell the browser, "Hey, this is not html." Inside the Style tag everything in here is CSS, so let's grab everything. And when you're copying and pasting stuff, happens to me all the time, always forget the closing brackets, make sure you grab all of them, and let's go to 'Edit', and go to 'Cut'. We don't need this Style tag now. It was just there to tell it was CSS. It's a lot cleaner, first of all. And here in style.css just go 'Edit', 'Paste'. 'Paste'; cool.
That's all you need to do in a Style sheet. Is you just, like we've learnt before, it's just in a separate sheet. Now it's not going to work; let's test it. We're going to learn a new function as well, 'File', 'Save All'. Why that's useful is that because we'll be doing changes to the html in CSS, and they're separate documents, right? Let's have a look. On my desktop, in Project0, there's Div Tags, and there's style.css, these two guys are separate. So it's easier just to go 'Save All'. I learned the shortcut, on my Mac it's 'Command-Shift-3'. What is it on a PC? If you're looking at a PC, go to 'File', it should have it right there. I'm guessing it, 'Ctrl-Alt-S'. So let's save it all, and let's check it in a browser.
So back in here, into Chrome, I've already got Div tags open, you might have to go to 'File', 'Open File'. I'm going to refresh it, and it's going to go all bad. So we've moved all the styling. That there, the Div tags are there but they're all collapsed, because we've got no height for them anymore. So what we need to do, the second part is, we've copied all of it from there to there, but this html document doesn't know this guy exists yet. He doesn't automatically go and find it, so we need to tell it. So let's do that.
So if you have called yours Styles, you're going to have to go through and add the 'S' there. If you called it, I can't think of another name, but let's call-- you called it Theme, you'll have to go and change it, because it puts Style in there just automatically. It's probably a good habit just to call it Style. Let's hit 'Save', let's do 'Save All'; shortcut time. Let's check in a browser now, there we go, 'Refresh', it all works. You're like, "That's a lot of work, why don't we just leave it?" You can tell the main reason is that all the html documents now, that I create will link to this one Style sheet. When I make a change in here it will flow through, an entire ginormous website easily, because they all look for that file. It also keeps it nice and clean. So we can keep our html separate from our CSS, and it means that this is kind of nice and tidy, and then this is nice and tidy. You can see how CSS, without all the html, is a really clean looking language; I love it.
Before we move on I just want to show you - oops, close that down. - a couple little things to do with CSS, in a Style sheet. If you hover above, let's say-- so it's telling me that's an element, if I hover above this one, can you see, it just tells me, it's just the background color of the element. This one here specifies the width. You can hover above these things if you're unsure what they do, or you open up somebody else's website, you're like, "What does that thing do?" You can give your brief explanation within VS code, and also something that's built into CSS, but not html by default, is, if you have errors, say I delete the opening bracket by accident, you'll see down here there's like, "Hey, you've got an error." If I click on it, it says that in your CSS sheet there's an unexpected error.
The problem is that that's not that helpful. I've never found these errors to actually be helpful. I can kind of decode it because I broke it. So it says it's expecting a curly brace at the beginning there. You can see, there's lots of errors, there's four of them, and I thought there's only one. It's because it's like this trickle of errors, so that one breaks, it can't understand the rest of it, but if I put it back, curly brace, don't need the second one, all the problems gone. We don't have that functionality built in to VS code for html at the moment. If earlier on you're like, "Hey, didn't go red, like yours did," it's an option that we're going to add a little bit later on, when we start looking at Extensions, but we need to do that a little bit later in the course.
Now if you do see errors, it's probably your brackets, your colon, or your semicolon, they're missing. Do that, it breaks it, put it in, unbreak it. So we get a lot of students kind of like, "Hey, mine's not working in classes and in videos," it's normally always just a syntax error, normally. The other thing people always forget to do, is that they forget to connect it in their html. They make it and they separate it all out, and then they forget to come back, double back, and connect it up. And they'll use-- it will be just something like this, there's people, loads of people like me, who are like, "It's not working," and I can see very clearly it's a spelling mistake. So maybe some copying and pasting just to make sure the syntax is all spelt right.
Now I'm going to set a little project. It's not going to be a separate class project, because there's no point sending it to me, because it's going to look exactly the same. So what I'd like you to do is, you created two documents in the previous tutorial, previous homework, if you didn't do it, go back and do them, but you've got these two html documents. I'd like you to separate them out, and have separate Style sheets for both of these. Now when you are separating them out one can be called Styles, but because they're going into the same folder, you can't have two of them called Styles. So have two separate Style sheets, just to go through the motions, of copying it out and making sure you get it right. So maybe call this one style1.css, and call this one style2.css, and see if you can make it work.
All right, that is it for separate Style sheets. I will see you in the next video.