This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to create a separate cascading style sheet in HTML & CSS

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_13

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
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 underneath the title let's push 'Return'. Now the long way is, bracket, link, '<link', and we're going to have it relative to the Style Sheet. 'Style Sheet', you can tell I never typed this in. And you've got to do-- you got to reference it, and you type in the style. So what do we call ours? We called ours Styles, plural, I can't remember. You're going to make sure it closes off, and you're like, "Man, I'm not going to remember that." And you don't have to. So the long way is the bad way. Let's close it. And we'll use VS code to help us out, so we can type 'Link', and then just kind of scroll down here and click on this one, because you can link different things, you can link to a favorite icon, you can link to JavaScript, we're linking to CSS, and it puts in all that stuff for us. It even puts the name in there. So that did not automatically go and figure out what I called it. That's just the default thing in there. 

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.