1
00:00:00,450 --> 00:00:08,100
Now that we've created our first Div. we can explore CSX declarations that allow us to customize the

2
00:00:08,100 --> 00:00:12,010
look and positioning of our div.

3
00:00:12,170 --> 00:00:22,210
The first item of discussion is CSX I.D. CSX I.D. are similar to classes they are defined in your style

4
00:00:22,210 --> 00:00:26,390
sheet and referenced in your HDMI elements.

5
00:00:26,410 --> 00:00:33,550
The primary difference is that once an I.D. has been referenced in an HMO element it cannot be used

6
00:00:33,550 --> 00:00:42,490
again within the same HMO file you might recall that when we created classes we could use that class

7
00:00:42,520 --> 00:00:47,770
as many times as we needed for multiple HMO elements.

8
00:00:47,770 --> 00:00:55,660
This is not the case with I.D. I.D. are generally used for layout elements that will only be needed

9
00:00:55,660 --> 00:01:06,600
once a great place to use I.D. is for defining CSF rules for divs divs are considered layout elements

10
00:01:06,750 --> 00:01:16,510
because they contain content such as graphics text and media that make up our webpage each div normally

11
00:01:16,510 --> 00:01:20,930
requires its own unique set of attributes.

12
00:01:20,930 --> 00:01:28,940
One example is the position attribute in most cases when designing CSF layouts.

13
00:01:28,940 --> 00:01:34,320
You wouldn't have to divs in the same location on the web page.

14
00:01:34,530 --> 00:01:43,930
For this reason we would need to I.D. that define unique position attributes for each div let's create

15
00:01:43,930 --> 00:01:52,130
a style rule for our div before applying it to the div we created earlier in order to create a style

16
00:01:52,130 --> 00:01:56,530
rule for our div and reference it as an I.D..

17
00:01:56,530 --> 00:01:58,480
We need to declare it in the style sheet

18
00:02:03,550 --> 00:02:06,660
let's create our style tags and define the I.D.

19
00:02:30,800 --> 00:02:32,980
We'll call this I.D. Div 1

20
00:02:36,150 --> 00:02:42,690
and when defining an I.D. you need to place the number sign in front of the name

21
00:02:54,300 --> 00:03:02,310
this particular I.D. now contains 4 style definitions the div will be 80 percent of the width of our

22
00:03:02,310 --> 00:03:12,760
content area it will have a 3 pixel block border the background of the div will be yellow and any text

23
00:03:12,760 --> 00:03:14,440
contained in the div will be blue

24
00:03:19,060 --> 00:03:26,290
And we'll also mention again that the style rule for our ideas reference begins with a no sign unlike

25
00:03:26,320 --> 00:03:29,200
our classes which began with a period

26
00:03:36,230 --> 00:03:37,680
with our idols created.

27
00:03:37,700 --> 00:03:47,540
We can now reference this I.D. in our devoted we'll go ahead and apply the idea here.

28
00:03:47,630 --> 00:03:57,940
We need to reference the idea by name and since we named it Div 1 will plug in Div 1.

29
00:03:57,950 --> 00:04:03,190
Now let's go ahead and save our file and preview it in our web browser to see the final result.

30
00:04:12,950 --> 00:04:21,790
So here we can see we have a three pixel block order the background of the div is yellow the text contained

31
00:04:21,970 --> 00:04:29,360
within the div is blue and the div itself is 80 percent of the width of the full content area.

32
00:04:34,840 --> 00:04:42,280
In addition to referencing an I.D. In our div tag we can also create a class and apply it to the div

33
00:04:42,280 --> 00:04:48,130
as well let's say we want in all the text in our div to be underlined.

34
00:04:48,240 --> 00:04:50,220
Well first we need to create the class

35
00:04:53,180 --> 00:05:00,950
so remember that your class starts off with a period followed by the class name

36
00:05:11,000 --> 00:05:13,180
and this is the CSF syntax for

37
00:05:15,860 --> 00:05:16,830
underlined text.

38
00:05:23,490 --> 00:05:24,330
Next will apply.

39
00:05:24,330 --> 00:05:28,000
This class in our div tag.

40
00:05:28,000 --> 00:05:30,550
So just make a space type.

41
00:05:30,550 --> 00:05:33,050
Class equals.

42
00:05:33,050 --> 00:05:39,500
And then in your quotations put the name of the class underlined.

43
00:05:39,520 --> 00:05:43,050
Now we can save or file preview it again

44
00:05:45,870 --> 00:05:51,360
and we can now see that the class has been applied and all the text within our div is underlined.