1
00:00:00,350 --> 00:00:03,420
In this video we're gonna talk about how
to link and

2
00:00:03,420 --> 00:00:07,760
edit the style sheet, to ensure everything
looks the way you want it to.

3
00:00:07,760 --> 00:00:08,520
Let's get started.

4
00:00:09,790 --> 00:00:11,770
In our code we have an index.html file,

5
00:00:11,770 --> 00:00:17,200
that holds all of our html and JavaScript
for our page.

6
00:00:17,200 --> 00:00:21,230
I've also connected an external style
sheet for our CSS.

7
00:00:21,230 --> 00:00:24,490
It's good practice to use an external
style sheet as you

8
00:00:24,490 --> 00:00:27,440
start making websites with multiple pages.

9
00:00:27,440 --> 00:00:28,780
To link to our style sheet,

10
00:00:28,780 --> 00:00:32,840
we'll have to start an html document, up
here in the head.

11
00:00:32,840 --> 00:00:37,480
I've labelled the link to the style sheet
with a comment, so you can find it easily.

12
00:00:37,480 --> 00:00:43,520
As expected it has an href attribute,
which defines the path to the style sheet,

13
00:00:43,520 --> 00:00:47,680
and a row attribute with a value of style
sheet.

14
00:00:47,680 --> 00:00:51,840
This attribute specifies the relationship
between the current document and

15
00:00:51,840 --> 00:00:53,550
the linked document.

16
00:00:53,550 --> 00:00:58,740
In this case, you can see that I've put my
style sheet into the folder called CSS.

17
00:00:59,800 --> 00:01:07,290
To describe this path, you use the folder
name, CSS, followed by a forward slash.

18
00:01:07,290 --> 00:01:14,050
If I expand and contract this file in my
file tree, you can see that my style.css

19
00:01:14,050 --> 00:01:20,240
is nested inside of my CSS folder, and the
href is telling us the same thing.

20
00:01:20,240 --> 00:01:24,790
If I left off the folder by accident, save
it,

21
00:01:26,330 --> 00:01:31,240
and refresh the page, you can see the raw
images without any styling.

22
00:01:31,240 --> 00:01:36,180
While you experiment with this, you might
wonder why the sounds still work.

23
00:01:36,180 --> 00:01:40,750
And that's because the sound is written
into the HTML document,

24
00:01:40,750 --> 00:01:44,400
which is the only page our browser is
reading right now.

25
00:01:44,400 --> 00:01:53,970
If you correct the link by adding
CSS/saveit and refresh the page,

26
00:01:53,970 --> 00:01:58,080
you can see that the spacing is back and
the background color has returned.

27
00:01:59,720 --> 00:02:04,460
>> While you're styling, adding pictures,
and connecting the external style sheet,

28
00:02:04,460 --> 00:02:08,680
it's always important to double-check the
paths you've described.

29
00:02:08,680 --> 00:02:11,540
Especially if things aren't looking the
way you expect.

30
00:02:12,620 --> 00:02:14,790
Let's see what you've picked up with a
quick quiz.