1
00:00:00,680 --> 00:00:09,020
The class selector allows you to apply specific styles to an HMO element from CSX rules defined in your

2
00:00:09,020 --> 00:00:11,250
style sheet.

3
00:00:11,270 --> 00:00:17,300
Think of it as setting up a catalog of different styles in your style sheet and referencing these styles

4
00:00:17,540 --> 00:00:21,360
when you need to apply them to your HMO elements.

5
00:00:21,410 --> 00:00:25,950
Let's take a look at an example in order to create a class.

6
00:00:25,950 --> 00:00:29,680
We need to define it in our sheet.

7
00:00:29,930 --> 00:00:31,910
We'll go ahead and create one class

8
00:00:37,640 --> 00:01:17,480
we'll call this class blue bold text.

9
00:01:17,510 --> 00:01:21,180
This is the syntax for defining a class.

10
00:01:21,740 --> 00:01:27,470
And you'll notice that the class begins with a period followed by the class name and you can give it

11
00:01:27,470 --> 00:01:33,290
any name you like will create a couple of other classes that will be using as well

12
00:02:05,860 --> 00:02:10,390
so for the class definitions we have a large font size.

13
00:02:10,390 --> 00:02:17,600
The colors green and this text will be bold and just one more class.

14
00:02:17,870 --> 00:02:21,080
This class will underline any text we apply to

15
00:02:36,370 --> 00:02:41,890
so we now have three classes created.

16
00:02:41,900 --> 00:02:49,050
Now let's apply one of the classes to the text contained in this column.

17
00:02:52,190 --> 00:02:53,470
Applying the class is easy

18
00:02:59,380 --> 00:03:04,350
we just need to call the class by its name.

19
00:03:04,590 --> 00:03:22,050
And so for this block of text will apply the blue bold text class.

20
00:03:22,290 --> 00:03:32,260
Now let's go ahead and save our file and preview it just to make sure that it worked.

21
00:03:32,460 --> 00:03:39,940
And so you can see that this class the class we created is now being applied to all the text in the

22
00:03:39,940 --> 00:03:40,690
column.

23
00:03:40,690 --> 00:03:42,100
We'd applied the class to

24
00:03:52,600 --> 00:04:00,440
now see for example we wanted to apply a different class to just these two words Lorem.

25
00:04:00,460 --> 00:04:00,910
If some

26
00:04:03,940 --> 00:04:06,640
in order to do that we need to use the span tags

27
00:04:09,700 --> 00:04:19,290
so we create a span so open a span take and a span can have a class as well so for this we'll use the

28
00:04:19,290 --> 00:04:22,170
large green text class

29
00:04:24,890 --> 00:04:26,510
let's make sure there's no spelling mistakes

30
00:04:34,540 --> 00:04:36,150
and we need to close the span tag

31
00:04:46,670 --> 00:04:54,900
so you can use this ban tags when there's no inline element to apply the class to so let's save our

32
00:04:54,900 --> 00:05:04,530
file and preview it.

33
00:05:04,550 --> 00:05:12,380
So now we have these two words that are a different class than the text sorry.

34
00:05:12,380 --> 00:05:14,180
Then the remaining text in that paragraph

35
00:05:18,160 --> 00:05:26,330
now see for example in addition to the large green text class we also want to apply the underline class.

36
00:05:26,470 --> 00:05:29,050
Well you just make a space in type.

37
00:05:29,050 --> 00:05:37,860
The second class you want to apply now save your file and we'll refresh our document and we can see

38
00:05:37,860 --> 00:05:41,100
that the underlying class is now being applied to this text as well.