Hi there. This video is all about separating our style sheet by taking it all out of the html and we'll put it up here in the head. Okay? And we're going to remove it and put it in its own document and connect the two. It's pretty simple. Jump in and do it. All right. It's pretty simple to create a separate or external. CSS style sheet we're gonna work with close down anything you've got open from previous part of the course. Okay, So it's nice and open or empty. If you can't see this, click on that first little tab here and if you can't see anything in here, go to file, open and find project zero. Okay. It's a folder that we made and click open. You should see all the files. So we're gonna work on the div tags dot html. It doesn't really matter which one. Okay, So we've got 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 p...

ainful. If we have 20 pages, say we have 2000 pages. Each page has a box one, we'd have to write box one on all of our separate 2000 pages. And if we wanted to change it, You just wouldn't. If the client comes back and said, can you make it ready? Like no, there's 2000 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 2000 pages can reference that one CSS sheet. Okay, so we can change it once on the CS sheet sheet and the html all go looking for that one sheet and we'll 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 it's got a file. It's cold. No, no. Let's go to file and get a new file. Alright, let's save it now. Okay. The difference here is we're going to call it, we can call it anything we like. As long as there's no spaces. Okay. So we're going to call it our style but we could call a style. Styles, plural. Um What else does it get called? What else? I just don't think of other generic names. You can call it anything. I can't think of anything. We'll call it style. Okay. Style. And it's going to be dot C. S. S Let's click save and basically what I wanna do is copy and paste the style from this document to this document. So what two tabs open. Okay. So from this document, what do we need? We need, we don't need this 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 the CSS. So let's grab everything and when you're copying and pasting stuff happens to me all the time. As always forget the closing brackets, make sure you grab all of them and let's go to edit and we'll go to cut. Okay. And we don't need this style tag. Now he was just there to tell it with CSS. So a lot cleaner first of all. And here in style dot CSS just go to edit paste. Mm hmm. Come that's all you need to do in a style sheet is you just like we've learned before. It's just in a separate sheet now. It's not gonna 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 and the CSS and the separate documents. Right? Let's have a look On My Desktop and Project zero. There's div tags and there's style dot 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 three. 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 control. So let's save it all and let's check it in a browser. So back in here and the Chrome, I've already got Div tags open. You might have to go to file and there's an open file. Okay. I'm gonna refresh it and it's going to go all bad. Okay. So we've moved all the styling, they're they're the div tags are there, but they're all collapsed because we've got no hype for them anymore. So what we need to do, the second part is we've copied all of it from there to there, but the html this html document doesn't know this guy exists yet. Okay. 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 the long way is bracket link and we're going to have it relative to the style sheet. Style sheets, you can tell I never type this and you've got to do or you got to reference it. Okay. And you type in the style. Okay. So what do we call ours? We called ours styles plural, I can't remember. And you gotta make sure it closes off and you're like, man, I'm not gonna remember that and you don't have to. Okay, so the long way is the bad way. Let's close it and we'll use various code to help us out. So we can type link. Okay. And then just kind of scroll down here and click on this one. Okay, Because you can link different things where you can link to a favorite icon, you can link it to javascript. We're linking to CSS and it puts in all that stuff for us and even puts the name in there. So that is not 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 your styles, you're gonna 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 call it style. Let's hit save. Let's do save all shortcut time. Let's check it in the browser now. There we go. Refresh. It all works like that's a lot of work. Why don't we just leave it? Okay, you can tell. The main reason is that all the html documents now that I create will link to this one style sheet and 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. Love it. Okay, before we move on, I just want to show you close that down and a couple little things to do with CSS style sheet. If you hover above let's say it's telling me that's an element for Hover above this one. Can you see? It just tells me it's it's the background color of the element. This one here specifies the width. Okay, So it's, you can hover above these things if you're unsure what they do or you open up somebody else's website and you're like, what does that thing do? Okay. You can give you a brief explanation within this code and also something that's built into CS. S but not html by default is if you have errors case, I delete with the opening bracket by accident. Okay, you'll see down here there's like, hey, you've got an error. Okay? If I click on it, it says that in your CSS sheet there's an unexpected error. Like the problem is is that that's not that helpful. I've never found these areas to actually be helpful. Okay. I can kind of decoded because I broke it. So it says it's it's expecting a curly brace at the beginning there. Okay. And you can see there's lots of errors. There's four of them were like, there's only one, it's because there's like this trickle of errors so that one breaks so it can't understand the rest of it, but if I put it back in, Get a brace. Don't need the 2nd 1. All the problems going okay. We don't have that functionality built into V. S. Code for html at the moment if earlier on, you're like, hey didn't go read like yours did. Okay. It's a, 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. Okay. They're missing do that. It breaks it, put it in and break it. So I get a lot of students kind of like, hey, mine's not working in classes and in videos and 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. Okay. 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, 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 spot. Right now, I'm going to set a little project now. 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. Okay. Previous homework, If you didn't do it, go back and do them. Okay. But you've got these two HTML documents. I'd like you to separate them out. Okay? 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. 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 style one dot CSS and call this one style two dot 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.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

External CSS

External CSS

Lesson Info

12. External CSS

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks