External CSS
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
External CSS
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
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding