1
00:00:00,840 --> 00:00:02,890
Hello and welcome.

2
00:00:02,970 --> 00:00:06,290
Thank you for signing up to this course.

3
00:00:06,390 --> 00:00:13,080
In this video you will learn what a CSF syntax rule is.

4
00:00:13,260 --> 00:00:18,120
CSX is used to a style heftier metal elements.

5
00:00:18,120 --> 00:00:23,500
This is an illustration of a CSF syntax rule.

6
00:00:23,520 --> 00:00:28,890
It consists of a select top and a declaration.

7
00:00:28,890 --> 00:00:36,890
BLOCK The selector is the CML element you want to apply styling to.

8
00:00:37,200 --> 00:00:39,130
In this illustration.

9
00:00:39,180 --> 00:00:49,080
The selector is the p tag which is used to create paragraphs in haste CML the declaration block contains

10
00:00:49,350 --> 00:01:00,360
a property and a value the property and the value together forms a declaration.

11
00:01:00,360 --> 00:01:11,310
BLOCK The property refers to what style you want to apply to the hefty AML selector and the value is

12
00:01:11,370 --> 00:01:12,610
the outcome.

13
00:01:12,900 --> 00:01:17,700
In this case we've got two declaration blocks in the first block.

14
00:01:17,850 --> 00:01:22,020
The property is a collar and the value is red.

15
00:01:22,290 --> 00:01:29,190
So what we're saying here we want to make a paragraph tag here have text that is read

16
00:01:32,520 --> 00:01:42,490
in the second declaration block we use the font size property to keep the text in the paragraph.

17
00:01:42,600 --> 00:01:53,790
A certain size this size we have specified here is 24 pixels which is a unit of measurement us as rule

18
00:01:53,820 --> 00:02:01,390
can have more than one declaration blocks as you can see in this illustration of Code 2.

19
00:02:01,400 --> 00:02:03,530
Declaration blocks.

20
00:02:03,600 --> 00:02:11,910
Dialing 1 selector here so assesses syntax rule consist of a selector.

21
00:02:11,910 --> 00:02:20,040
You must have an HMO element you want to apply styling to and then you have a declaration block which

22
00:02:20,040 --> 00:02:24,080
consists of the property and the value.

23
00:02:24,210 --> 00:02:29,880
The declaration blocks are enclosed inside curly braces.

24
00:02:29,940 --> 00:02:35,460
These yellow curly braces is very important that they match.

25
00:02:35,460 --> 00:02:37,350
So you've got the left and the right on.

26
00:02:37,350 --> 00:02:41,820
They must match if not the styling will not work.

27
00:02:41,820 --> 00:02:48,220
Also notice there is a semicolon at the end of each declaration block.

28
00:02:48,240 --> 00:02:55,080
This is very important because it specifies the end of that declaration.

29
00:02:55,080 --> 00:03:02,930
Also notice that the colon is used to separate the property and the value.

30
00:03:03,150 --> 00:03:09,230
So you've got a colon here used to separate the property and the value.

31
00:03:09,240 --> 00:03:16,680
This is how you would represent the syntax shown in the illustration in a text editor.

32
00:03:16,890 --> 00:03:18,390
So this is the.

33
00:03:19,320 --> 00:03:21,120
This is the staff here.

34
00:03:21,180 --> 00:03:29,500
If you are applying style internally into an HMO document you have to enclose them in the style tag.

35
00:03:29,610 --> 00:03:31,690
So this in this case here.

36
00:03:31,710 --> 00:03:39,570
The paragraph tag here which is this here in the body is the selector and between the braces here the

37
00:03:39,570 --> 00:03:43,270
curly braces we have our declaration block.

38
00:03:43,440 --> 00:03:50,610
This is the first declaration block here and then here and then this is the second declaration block.

39
00:03:50,610 --> 00:03:59,700
Notice I've got my semicolon here at the end of the Declaration block outside the curly braces and I've

40
00:03:59,700 --> 00:04:04,260
got my colon here that separates the property and the value.

41
00:04:04,740 --> 00:04:11,310
And then we've got the semicolon for the end of the first block and then we've got another call on here

42
00:04:11,640 --> 00:04:16,750
that separates the property and the value of the second declaration block.

43
00:04:17,160 --> 00:04:28,220
So this is how you would represent a CSF syntax a mosque consists a must have an HMO element to Stout

44
00:04:28,590 --> 00:04:36,990
which is the selector and then it stalls it with the property and the property must have a value.

45
00:04:37,020 --> 00:04:44,600
In this example here this is a web page that has been styled with a text of red.

46
00:04:44,640 --> 00:04:50,090
So this column read here what it does is made this paragraph here Red.

47
00:04:50,100 --> 00:04:57,750
That's what this column here this column property is used to make the text read in this video.

48
00:04:57,750 --> 00:05:09,540
I explained what a CSF syntax rule is that is syntax consists of a selector and one or more declaration

49
00:05:09,540 --> 00:05:15,780
block to declare which on blocks consists of a property and in value.

50
00:05:15,780 --> 00:05:18,030
Thank you so much for watching.

51
00:05:18,030 --> 00:05:20,500
I hope the video has been helpful.

52
00:05:20,580 --> 00:05:22,230
Thanks and bye for now.