1
00:00:00,510 --> 00:00:07,120
There are three types of CSI styles internal inline and external styles.

2
00:00:07,170 --> 00:00:15,880
This HDMI page illustrates an example of an internal style sheet and inline styles an internal style

3
00:00:15,880 --> 00:00:22,150
sheet simply means that the style sheet is contained in the same HMO document in which the styles are

4
00:00:22,150 --> 00:00:22,780
used.

5
00:00:23,640 --> 00:00:24,310
Here.

6
00:00:24,320 --> 00:00:35,060
We've defined a style sheet in between our head tags with three rules that will format the body the

7
00:00:35,070 --> 00:00:40,090
header one tags and the paragraph elements.

8
00:00:40,090 --> 00:00:47,150
This is an example of an internal style sheet we can easily convert this into an external style sheet

9
00:00:47,750 --> 00:00:57,210
by placing our style rules in a CSX file and linking to it to do so cut the styles rules out and delete

10
00:00:57,270 --> 00:00:58,230
the style tags

11
00:01:03,680 --> 00:01:09,320
now create a new file and paste the style rules into it.

12
00:01:11,420 --> 00:01:16,230
Now save this file as my styles dot the SS.

13
00:01:16,320 --> 00:01:24,080
You can use any name you want that's just an example.

14
00:01:24,100 --> 00:01:26,860
Make sure that the extension is a dot c SS file.

15
00:01:26,890 --> 00:01:28,300
Otherwise this will not work

16
00:01:31,950 --> 00:01:38,050
now when a switch back to the original file and we're going to link to our external style sheet using

17
00:01:38,050 --> 00:01:38,920
this line of code

18
00:01:42,990 --> 00:01:46,950
we can confirm that it worked by previewing the file in our web browser

19
00:01:51,570 --> 00:01:54,800
and you can see that all the styles are still applied.

20
00:01:55,050 --> 00:01:59,670
In addition to internal and external install sheets we also have inline C Ss

21
00:02:02,770 --> 00:02:09,080
with inline C Ss the style rules are added directly inside the element.

22
00:02:09,160 --> 00:02:14,530
For example here we have a paragraph element with two inline rules.

23
00:02:14,530 --> 00:02:23,550
Style is equal color blue and font size thirty five we can see in our web browser that the style rules

24
00:02:23,670 --> 00:02:32,820
have been applied to this paragraph of text the text size is 35 pixels and the color is blue using inline

25
00:02:32,820 --> 00:02:36,480
rules is normally not a good practice because it's inefficient.

26
00:02:36,840 --> 00:02:43,290
If we used inline rules on all our pages we would need to individually open each one and edit the rule

27
00:02:44,380 --> 00:02:51,730
inline rules also cause unnecessary repetition and increase the length of the HMO code when possible

28
00:02:52,330 --> 00:02:53,820
use external style sheets.