Skip to main content

External CSS

Lesson 12 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

12. External CSS

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

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

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

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

Student Work

RELATED ARTICLES

RELATED ARTICLES