WEBVTT FILE





1
00:00:06.319 --> 00:00:13.500
in this video we're gonna learn classes and ID's let's create a new file called

2
00:00:13.500 --> 00:00:23.220
classes and ID's those KML and let's impose the content from the internal CSS

3
00:00:23.220 --> 00:00:28.890
file by the way we're gonna keep using the internal CSS for the rest of the CSS

4
00:00:28.890 --> 00:00:47.129
chapter just for simplicity reasons okay let's add a third paragraph okay earlier

5
00:00:47.129 --> 00:00:52.500
we have styled all paragraphs using the P letter now we want to try something

6
00:00:52.500 --> 00:00:57.870
new we want to style only the first paragraph there is a way to do that is

7
00:00:57.870 --> 00:01:03.780
by using the ID concept so inside the open tag of paragraph we're gonna give

8
00:01:03.780 --> 00:01:10.470
it an attribute ID I'm going to call it this side for instance okay and rather

9
00:01:10.470 --> 00:01:15.540
than using the P letter we're gonna use a number sign followed by the ID name

10
00:01:15.540 --> 00:01:20.390
and now you can see that only the first paragraph is styled using this styling

11
00:01:20.390 --> 00:01:27.030
okay now if you want to style both the second and the third paragraph with a

12
00:01:27.030 --> 00:01:32.670
blue color for instance we can still use an ID for each paragraph by the way you

13
00:01:32.670 --> 00:01:39.390
can use one ID for each for one HTML element you can't have two elements with

14
00:01:39.390 --> 00:01:46.290
the same ID okay so there is another way to do this it's by using the class

15
00:01:46.290 --> 00:01:52.320
concept so the way to do that is by giving both paragraphs the same class

16
00:01:52.320 --> 00:02:03.810
name for instance blue and then we're gonna start style the class with a blue

17
00:02:03.810 --> 00:02:08.459
color so the way to start classes is by using the dots followed by the class

18
00:02:08.459 --> 00:02:13.110
name okay and then now we can set the color

19
00:02:13.110 --> 00:02:19.340
to blue and you can see this both paragraphs now are blue okay so again

20
00:02:19.340 --> 00:02:28.770
IDs are used to style one single element that can have one ID and classes they

21
00:02:28.770 --> 00:02:34.250
can be used to style many elements belonging to the same class