1

00:00:00.05 --> 00:00:01.09

- [Narrator] Before we write CSS

2
00:00:01.09 --> 00:00:03.02
let's talk about the different ways

3
00:00:03.02 --> 00:00:05.04
that it can be added to the HTML.

4
00:00:05.04 --> 00:00:07.08
There are three different methods.

5
00:00:07.08 --> 00:00:11.01
The external method refers to using a separate CSS file

6
00:00:11.01 --> 00:00:14.02
and must be saved with the CSS file extension.

7
00:00:14.02 --> 00:00:17.04
There are two ways to load the external CSS file

8
00:00:17.04 --> 00:00:22.06
into the HTML, with a link tag or using the @import method.

9
00:00:22.06 --> 00:00:25.01
The link tag is added to the head of the document

10
00:00:25.01 --> 00:00:28.01
with two attributes, rel and href.

11
00:00:28.01 --> 00:00:30.05
Rel stands for the relationship and uses the value

12
00:00:30.05 --> 00:00:35.04
of stylesheet, the href value is the path to the CSS file.

13
00:00:35.04 --> 00:00:39.00
Link is a void element so it doesn't need a closing tag.

14
00:00:39.00 --> 00:00:41.01
You may see this snippet with another attribute,

15
00:00:41.01 --> 00:00:45.02
type="text/css", this was required in the previous
16
00:00:45.02 --> 00:00:47.04
versions of HTML, but is no longer needed

17
00:00:47.04 --> 00:00:50.08
in HTML5, the latest version, but if it's there

18
00:00:50.08 --> 00:00:52.01
it doesn't hurt either.

19
00:00:52.01 --> 00:00:55.04
But my rule is, if you don't need it, leave it out.

20
00:00:55.04 --> 00:00:57.05
Using an external stylesheet is recommended

21
00:00:57.05 --> 00:01:00.04
because it separates the CSS from the HTML

22
00:01:00.04 --> 00:01:03.01
making it easier to manage.

23
00:01:03.01 --> 00:01:05.06
An external stylesheet can be reused throughout

24
00:01:05.06 --> 00:01:09.05
a project by linking the same CSS file to any HTML file.

25
00:01:09.05 --> 00:01:12.03
And any changes made to the CSS file will be reflected

26
00:01:12.03 --> 00:01:16.05
on all the HTML pages that it's being loaded into.

27
00:01:16.05 --> 00:01:18.06
You can use more than one CSS file,

28
00:01:18.06 --> 00:01:20.08
but using too many may defeat the purpose

29
00:01:20.08 --> 00:01:23.02
of having separate stylesheets if you're maintaining

30
00:01:23.02 --> 00:01:26.07
a bunch of different files, however for larger projects

31
00:01:26.07 --> 00:01:30.02
and code bases, having one giant CSS file can also

32
00:01:30.02 --> 00:01:33.03
become unruly, so sometimes breaking them down

33
00:01:33.03 --> 00:01:36.04
into smaller files can make it easier to manage.

34
00:01:36.04 --> 00:01:41.00
And if that's the case, there is a way to combine the files.

35
00:01:41.00 --> 00:01:44.01
The second external method uses the @import rule

36
00:01:44.01 --> 00:01:47.08
which imports one or more stylesheets into HTML files

37
00:01:47.08 --> 00:01:50.07
or into another CSS file.

38
00:01:50.07 --> 00:01:53.02
This method can be used to import all the smaller

39
00:01:53.02 --> 00:01:56.09
CSS files into a single CSS file,

40
00:01:56.09 --> 00:01:59.06
which is then loaded into the HTML document

41
00:01:59.06 --> 00:02:03.04
between a style tag in the head of the document.

42
00:02:03.04 --> 00:02:05.05
This method isn't used often these days

43
00:02:05.05 --> 00:02:08.04
because the downside to using import is the potential

44
00:02:08.04 --> 00:02:10.07
for slowing down your page speed.

45
00:02:10.07 --> 00:02:13.02
Import does not allow for parallel downloads,

46
00:02:13.02 --> 00:02:16.02
meaning the page must download an entire stylesheet

47
00:02:16.02 --> 00:02:19.00
before it loads the rest of the page.

48
00:02:19.00 --> 00:02:21.08
Here is a detailed blog post about how import

49
00:02:21.08 --> 00:02:27.03
affects page load, it's from 2009 but it's still relevant.

50
00:02:27.03 --> 00:02:29.09
The import method is however, commonly used with

51
00:02:29.09 --> 00:02:32.09
CSS preprocessors such as SASS or LESS,

52
00:02:32.09 --> 00:02:35.05
or when CSS files are compiled into one file

53
00:02:35.05 --> 00:02:38.00
before loading it into the page.

54
00:02:38.00 --> 00:02:40.04
This topic is a bit more advanced for this course,

55
00:02:40.04 --> 00:02:42.09
we should learn some CSS basics first.

56
00:02:42.09 --> 00:02:45.00
So for now, just know that you'll probably see

57
00:02:45.00 --> 00:02:46.09
this method being used at some point,

58
00:02:46.09 --> 00:02:50.08
but we'll be using the link method for our projects.

59
00:02:50.08 --> 00:02:53.01
The inline method uses a style attribute
60
00:02:53.01 --> 00:02:56.06
which is added to the opening HTML tag.

61
00:02:56.06 --> 00:02:58.02
Make sure to include a space

62
00:02:58.02 --> 00:03:00.07
between the tag name and the attribute.

63
00:03:00.07 --> 00:03:03.02
The CSS style rules are added as the value,

64
00:03:03.02 --> 00:03:07.03
which applies they style directly to the HTML element.

65
00:03:07.03 --> 00:03:09.05
The inline method should be used sparingly,

66
00:03:09.05 --> 00:03:12.00
if at all, because it is hard to manage.

67
00:03:12.00 --> 00:03:14.09
Multiple styles must be added to the same style attribute,

68
00:03:14.09 --> 00:03:17.07
and the more you add the harder it is to read.

69
00:03:17.07 --> 00:03:21.05
Also, CSS added by any other method is overwritten

70
00:03:21.05 --> 00:03:24.00
by the inline styles, creating more potential

71
00:03:24.00 --> 00:03:27.02
for conflict with other CSS style rules.

72
00:03:27.02 --> 00:03:29.05
The inline method is also not reusable

73
00:03:29.05 --> 00:03:31.09
since it's applied directly to each element.

74
00:03:31.09 --> 00:03:33.07
What if you had 50 paragraphs?
75
00:03:33.07 --> 00:03:37.03
You would have to add the style to each one.

76
00:03:37.03 --> 00:03:40.02
The third option is the internal method.

77
00:03:40.02 --> 00:03:42.06
CSS is added between the style tag

78
00:03:42.06 --> 00:03:44.04
in the head of the document.

79
00:03:44.04 --> 00:03:46.07
This method is more flexible than the inline method

80
00:03:46.07 --> 00:03:48.05
because instead of adding styles to each

81
00:03:48.05 --> 00:03:51.08
individual element, CSS selectors are used

82
00:03:51.08 --> 00:03:55.00
to apply a style to all the matched elements.

83
00:03:55.00 --> 00:03:56.05
We'll be talking a little bit more about

84
00:03:56.05 --> 00:03:59.04
selectors in an upcoming lesson.

85
00:03:59.04 --> 00:04:02.04
While internal CSS works better than inline CSS

86
00:04:02.04 --> 00:04:04.03
it can still be inefficient.

87
00:04:04.03 --> 00:04:06.05
If you had multiple HTML pages,

88
00:04:06.05 --> 00:04:08.01
you would have to copy this style block

89
00:04:08.01 --> 00:04:11.08
to every single page to duplicate the styles.

90
00:04:11.08 --> 00:04:14.09
The internal method is best for short blocks of CSS

91
00:04:14.09 --> 00:04:17.08
that only need to be applied to one page.

92
00:04:17.08 --> 00:04:19.03
As we progress through this course,

93
00:04:19.03 --> 00:04:21.01
you will see that there are often different ways

94
00:04:21.01 --> 00:04:23.01
to accomplish the same thing.

95
00:04:23.01 --> 00:04:25.08
I'll be sure to go over best practices to help you decide

96
00:04:25.08 --> 00:04:28.05
which options work best for each scenario.