1
00:00:01,490 --> 00:00:06,420
In previous lessons, we've learned 
about inline styles and internal

2
00:00:06,420 --> 00:00:09,924
styles, and while both are 
valid ways to add CSS,

3
00:00:09,924 --> 00:00:13,710
they're not recommended
on larger projects.

4
00:00:13,710 --> 00:00:17,693
Neither of these methods separates
content from presentation and

5
00:00:17,693 --> 00:00:21,900
they can make overall development 
and maintenance quite difficult.

6
00:00:23,170 --> 00:00:28,931
Instead of writing our CSS inside
the HTML file, the most common

7
00:00:28,931 --> 00:00:34,227
and efficient way of adding CSS 
to a page is with an external

8
00:00:34,227 --> 00:00:38,075
style sheet. That's because when 
we use an external style sheet,

9
00:00:38,075 --> 00:00:43,570
we can change the look of an 
entire website with just one file.

10
00:00:43,570 --> 00:00:44,999
Let's see how that works.

11
00:00:46,160 --> 00:00:50,853
First, let's delete the internal
styles we wrote previously.

12
00:00:54,472 --> 00:00:59,000
Then, we'll need to create a style 
sheet, and that's where we'll write

13
00:00:59,000 --> 00:01:05,045
our styles. In our workspace,
we'll create a new file and

14
00:01:05,045 --> 00:01:11,341
name it style.css. To keep our 
files nicely organized,

15
00:01:11,341 --> 00:01:17,730
we'll drag that until it lands
in our CSS folder. The .css

16
00:01:17,730 --> 00:01:23,710
extension is what tells the browser 
that the file is a style sheet.

17
00:01:24,870 --> 00:01:30,270
Make sure you always add the 
.css extension to every style sheet

18
00:01:30,270 --> 00:01:36,870
you create. Next, we'll need to link 
this style sheet to our HTML file,

19
00:01:36,870 --> 00:01:39,540
and we can do that with 
HTML's link element.

20
00:01:41,270 --> 00:01:45,080
We'll go over to the head
section of our HTML file,

21
00:01:45,080 --> 00:01:49,390
and right beneath the title tag,
we'll create a link element.

22
00:01:51,000 --> 00:01:56,510
At the very least, we'll need to add
two attributes to this link tag

23
00:01:56,510 --> 00:02:00,120
in order for our CSS file 
to link correctly.

24
00:02:01,790 --> 00:02:05,510
First we'll include 
the rel attribute.

25
00:02:07,600 --> 00:02:12,099
This is an important attribute
that specifies the relationship

26
00:02:12,099 --> 00:02:17,200
between the current HTML 
document and the linked document.

27
00:02:17,200 --> 00:02:22,250
So its value needs to be stylesheet
because that's what we're linking to.

28
00:02:22,250 --> 00:02:27,000
This tells the browser, hey, we're 
linking to a stylesheet right here

29
00:02:27,000 --> 00:02:32,850
in line seven. Keep in mind that if
this rel value is misspelled–for

30
00:02:32,850 --> 00:02:37,542
instance, if we write style
sheets instead of style sheet–

31
00:02:37,542 --> 00:02:41,140
the browser will not
link to your stylesheet.

32
00:02:43,320 --> 00:02:48,136
Next, the href–or
hypertext reference–attribute

33
00:02:48,136 --> 00:02:53,360
is what points to
the location of the CSS file.

34
00:02:53,360 --> 00:02:56,700
We know it's in a 
folder called css.

35
00:02:56,700 --> 00:02:59,691
So we need to write the 
path to the CSS

36
00:02:59,691 --> 00:03:09,150
file as css/style.css.
In our new style.css file,

37
00:03:09,150 --> 00:03:13,852
we'll write a few styles
for some of our elements.

38
00:03:36,244 --> 00:03:40,800
Again, don't worry if you're not sure
what these styles mean right now.

39
00:03:40,800 --> 00:03:43,130
We're going to cover 
that part soon.

40
00:03:44,160 --> 00:03:46,666
All you need to understand here 
is the concept of separating

41
00:03:46,666 --> 00:03:52,780
content from presentation. 
In the workspace preview, 

42
00:03:52,780 --> 00:03:58,571
we can see how the external 
style sheet affects the page.

43
00:04:00,671 --> 00:04:05,914
Compared to the previous
methods we used to add CSS,

44
00:04:05,914 --> 00:04:11,550
the advantage to using this external
style sheet method is flexibility.

45
00:04:11,550 --> 00:04:16,532
We may have multiple HTML files
linked to this stylesheet, but

46
00:04:16,532 --> 00:04:21,796
as long as we keep our CSS in
a separate file, any styling 

47
00:04:21,796 --> 00:04:25,660
changes or additions we need 
to make are done in one file.

48
00:04:27,420 --> 00:04:32,428
Another advantage is that after
the browser first loads the stylesheet,

49
00:04:32,428 --> 00:04:37,590
the style sheet file gets cached or
kept in temporary storage by

50
00:04:37,590 --> 00:04:42,105
the browser. This saves on download
time throughout the site and

51
00:04:42,105 --> 00:04:47,180
on repeat visits because the style
sheet only needs to download one time.

52
00:04:49,180 --> 00:04:52,878
If you're wondering why we link to 
style sheets from the head section 

53
00:04:52,878 --> 00:04:59,010
of the HTML document, that's standard 
practice for more efficient loading.

54
00:04:59,010 --> 00:05:04,365
Linking to a style sheet from the head
of the document ensures the browser

55
00:05:04,365 --> 00:05:09,645
loads and parses the stylesheet first,
before any elements in the body.

56
00:05:09,645 --> 00:05:15,039
This way when our website is up on 
a web server, and a user visits our site,

57
00:05:15,039 --> 00:05:19,050
the HTML is styled before
it's presented to the user.

58
00:05:20,740 --> 00:05:25,723
You might also be wondering if you 
can link multiple style sheets in the 

59
00:05:25,723 --> 00:05:27,870
head by using more than one link tag.

60
00:05:28,870 --> 00:05:31,570
You can, and sometimes you will.

61
00:05:31,570 --> 00:05:36,190
But keep in mind that each stylesheet
requires a new request to the 

62
00:05:36,190 --> 00:05:39,193
web server. Even on large, 
complex sites,

63
00:05:39,193 --> 00:05:43,060
you'll want to keep these
additional requests to a minimum.