1
00:00:10,180 --> 00:00:21,850
Before we start to write CSS code unless we know how to link CSS to HTML or how we can connect CSS to

2
00:00:22,030 --> 00:00:22,660
HTML.

3
00:00:22,960 --> 00:00:29,560
Let's look at the couple of ways when it comes to linking of CSS to HTML.

4
00:00:29,590 --> 00:00:34,480
There are three ways to include CSS within the HTML.

5
00:00:34,810 --> 00:00:39,820
The first step or the first concept is inline CSS.

6
00:00:40,270 --> 00:00:41,530
What does it mean?

7
00:00:41,770 --> 00:00:51,520
This method involves adding the CSS rule directly within the HTML element using the style attribute.

8
00:00:52,140 --> 00:00:57,120
In the next video, we will get back to code to explain how it works.

9
00:00:57,120 --> 00:01:02,130
But for the meantime, let me show you what it means when we say inline.

10
00:01:02,130 --> 00:01:10,710
We are going to write the CSS within the element itself by using what is called the style attribute.

11
00:01:10,740 --> 00:01:12,210
That's what it means.

12
00:01:12,210 --> 00:01:16,860
The next video I will show you how we are going to write actual CSS code.

13
00:01:16,860 --> 00:01:21,240
So what are some of the advantages and disadvantages of this?

14
00:01:21,390 --> 00:01:28,980
Well, this approach is not recommended for larger projects as it makes maintenance more complex and

15
00:01:28,980 --> 00:01:35,760
it doesn't utilize the advantage of CSS being able to control the styling from a single location.

16
00:01:36,030 --> 00:01:42,300
However, it can be more useful for quick testing or minor style changes.

17
00:01:42,540 --> 00:01:48,690
The next step or the next concept is called the internal or the embedded.

18
00:01:49,140 --> 00:01:50,580
As the name implies.

19
00:01:50,820 --> 00:01:59,920
This involves us adding the CSS rule within the style tags in the head section of the HTML document,

20
00:01:59,920 --> 00:02:06,910
and this allows you to define the style for the entire HTML document in one place.

21
00:02:07,120 --> 00:02:14,740
For this one, it means that we are going to add the CSS within the head tag using what is called the

22
00:02:14,740 --> 00:02:15,460
style.

23
00:02:15,790 --> 00:02:20,650
Again, don't worry, the next video, I'll show you how we are going to implement this.

24
00:02:20,770 --> 00:02:23,170
For the meantime, let me remove that.

25
00:02:23,530 --> 00:02:27,160
So what are some of the advantages for this?

26
00:02:27,190 --> 00:02:34,540
As the name implies, this allows you to define the styles for the entire HTML document in one single

27
00:02:34,540 --> 00:02:35,290
place.

28
00:02:35,780 --> 00:02:45,830
The last one is external CSS and this is the most common and the recommended method for adding or including

29
00:02:45,830 --> 00:02:49,850
or connecting CSS in larger project.

30
00:02:50,270 --> 00:02:59,090
It involves creating a separate CSS file and linking it to the HTML document itself, using the link

31
00:02:59,120 --> 00:03:01,040
tag in the head section.

32
00:03:01,040 --> 00:03:09,470
And this allows you to write your CSS code separately from your HTML code, making your code cleaner

33
00:03:09,470 --> 00:03:11,450
and more manageable.

34
00:03:11,810 --> 00:03:16,850
So in the next video, we are going to explore each of these methods.