All language subtitles for 5. External CSS

Now in the last lesson, we looked at how we can implement a CSS style and apply it to all instances of
1

a particular HTML element on a single page.
2

So we changed the style for our horizontal rule and by adding this internal CSS to our index.html page
3

we managed to affect the style of all the horizontal rules on the same page.
4

Now we're going to take it one step further and we're going to change our web site that uses internal
5

CSS to external CSS and to do that we first have to create a new folder in our personal site.
6

So I'm going to create a new folder that's called simply CSS.
7

And inside this folder I'm going to create a new file and that file is going to be called
8

styles.css.
9

So with that extension the browser will recognize it as a CSS file.
10

So once you hit Enter you'll see that we have this brand new file called styles.css and we're
11

going to move our code for the body and the horizontal rule over to this page.
12

I'm going to hit save and we're going to remove the style tag.
13

So now if I hit save and I refresh our web site you can see that all the style that we've applied is now
14

gone because we've deleted it from the style tag in the header.
15

Now instead what we're going to do is we're going to create a new link.
16

And if you write link and you hit enter then it will autofill to say that this link has a relationship
17

of something called the stylesheet.
18

So when your browser reads your web page it'll go from the top to the bottom and once it hits this line
19

it’ll see that "oh this is where the stylesheet for this web page resides".
20

And I can go over here to fetch it.
21

Now we need to change this href to point towards our styles.css.
22

So the first thing we need to change is the file name.
23

Our file’s not called master.css, it’s called styles.css, and the other thing that we
24

have to change is this forward slash here.
25

Now if an href starts off with a forward slash then it's pointing towards the root of your web site.
26

It's saying that you'll find this file inside a folder called css
27

inside the root of your web site. Now we're going to talk about the root a little bit later on especially
28

once we start getting into Javascript.
29

But for now just know that when you have a static web site that's not yet hosted anywhere,
30

you can't tap into this file using the root.
31

So instead we're going to say that this file resides in a folder called css and it's on the same level
32

as this current file.
33

So index.html is here and on the same level as it there is a folder called css inside of which there
34

is a file called styles.css and that is going to be our stylesheet.
35

So your browser then takes this file here then applies all of these styles to the specified elements
36

inside your index.html.
37

So let's hit save and let's refresh our page to make sure that it worked.
38

And it has.
39

So this is what we call the external CSS.
40

And if we apply this style sheet to our Contact Me page as well as our Hobbies page then you'll see
41

that once we go to it then you'll see that all of our styles gets applied across all three pages and
42

all we have to do is just add this simple link that points towards this external stylesheet.
43

And anything that we change in this single location will affect all three web pages.
44

So we'll know that the style is consistent across all three pages.
45

Now as a challenge I want you to select the h1 and the h3 elements on all three pages and I
46

want you to change its color property to this particular color that we had on colorhunt.
47

So 66BFBF.
48

And by the end of it you should end up with your site looking similar to this where on all three pages
49

the h1s and the h3s are colored in this new shade.
50

Now remember if you don't know which CSS property to change or if the property that you're trying to
51

change isn't working you can always go to Google and say ‘change text color css’ and that will help you
52

figure out which property you need to change.
53

So go ahead, pause the video and give it a go.
54

All right.
55

So how did that go?
56

Well if you have any difficulty figuring out which property you need to change, because it's a property
57

that we haven't used before,
58

then you needed to look at some of the documentation.
59

And in this case, for example changing the text using CSS,
60

the first thing that it talks about is changing the text color, which is exactly what we want to do.
61

And it tells you that the property that you need is something called color and you can specify the color
62

just as we did before for the background color with a name or with a hex value or with an RGB value.
63

So our value that we had was here, which is 66BFBF,
64

we’re going to copy it and we're going to go into the styles.css,
65

so our external style sheet,
66

and we're going to select the element that we want to change which is the h1 as well as the h3.
67

And the property that we want to change was called color and the value that we're going to give it is the
68

hex code 66BFBF and we want that to be true
69

in both cases.
70

So now if you hit save and you go over to your site and you hit refresh then the black text becomes
71

that nice green turquoise color.
72

And the changes are also reflected in Hobbies and Contact Me.
73

So did you get that right?
74

Did you manage to figure out which property you needed to change?
75

If yes then great.
76

Perfect. If you want to take this challenge even further then you can style the text in more ways than
77

we've specified here
78

by looking through the documentation and changing anything that you want to change.
79

So, for example, it's a bit odd to have the h1 the same color as the h3.
80

So you could differentiate those two by making the styles of each of them different.
81

Now if you've created something wonderful, wacky, or completely different from what I have then it's a
82

good time to show off what you've done and head over to the Q&A section and show all of your fellow
83

students and post a screenshot of what your web site looks like and which CSS properties you changed
84

in order to achieve it.
85

Now in the next lesson we're going to look at some potential bugs that you might come across and ways
86

in which you can help yourself by diagnosing what the problem is and how you can fix it yourself.
87

So we're starting to learn about the important skill of debugging.
88

So for all of that and more I'll see you on the next lesson.