1
00:00:00,640 --> 00:00:09,790
The syntax for CSX is different than HCM El Marco and consists of three parts a selector a property

2
00:00:10,480 --> 00:00:19,690
and a value the selector is the HD PML element that you want to apply this style to.

3
00:00:19,790 --> 00:00:26,610
Let's take a look at an example open the file in your Downloads folder corresponding to this lecture

4
00:00:30,660 --> 00:00:32,420
with the file open.

5
00:00:32,430 --> 00:00:35,850
Let's preview it in our web browser to see what the original looks like.

6
00:00:43,570 --> 00:00:55,780
We can see that there are three headings and three paragraphs.

7
00:00:55,800 --> 00:00:59,820
Now let's create a style sheet contained within our head take

8
00:01:18,760 --> 00:01:24,280
let's create a style rule that changes the background color of our web page to pink

9
00:01:27,060 --> 00:01:27,620
for this.

10
00:01:27,660 --> 00:01:32,860
We will need to create the following style rule inside of our style sheet.

11
00:01:32,910 --> 00:01:36,480
So in between our stop are open and close style tag

12
00:01:58,840 --> 00:02:07,460
in this case the body is the selector and the property is the background once you've inserted the style

13
00:02:07,460 --> 00:02:11,480
rule save your document and preview it in your web browser

14
00:02:26,040 --> 00:02:28,530
you will notice the pages background is now pink

15
00:02:35,580 --> 00:02:39,020
each selector can have multiple properties.

16
00:02:39,100 --> 00:02:46,400
For example if you wanted to change both the colour of the background and the default font for the web

17
00:02:46,400 --> 00:02:53,280
page to Ariel the CSI style rule would now look like this.

18
00:03:03,810 --> 00:03:04,830
Let's see var page

19
00:03:08,190 --> 00:03:14,730
and we'll refresh the contents in our web browser and we can now see that all the font on the page is

20
00:03:14,730 --> 00:03:15,570
change to area

21
00:03:25,790 --> 00:03:31,040
if you only wanted to apply another rule to certain selectors.

22
00:03:31,040 --> 00:03:32,720
You can do that as follows.

23
00:03:36,190 --> 00:03:46,850
Let's say we wanted to change all the headers all the h1 tags in our document to a different font color

24
00:03:47,300 --> 00:03:48,790
and a different font family

25
00:04:20,310 --> 00:04:29,210
in this case any block of text within each one tags will have the color red and the font family.

26
00:04:29,270 --> 00:04:29,780
Georgia

27
00:04:33,980 --> 00:04:38,710
so let's go ahead and add the h1 tag around our first heading heading one.

28
00:04:40,430 --> 00:04:43,490
So with the I'll start with the open h1 tag

29
00:04:46,310 --> 00:04:49,270
and the close h1 tag.

30
00:04:49,300 --> 00:04:54,540
Now let's go ahead and save and take a look in our browser.

31
00:04:59,610 --> 00:05:10,270
We can see that the heading is now much larger and a different color the font face is also different

32
00:05:11,950 --> 00:05:13,000
so just as we intended

33
00:05:19,720 --> 00:05:22,380
selectors can also be combined.

34
00:05:22,450 --> 00:05:32,090
So say for example not only did we want to change the H1 headers to this font in color we also wanted

35
00:05:32,090 --> 00:05:37,010
to do the same for H2 H3 and H for

36
00:05:40,910 --> 00:05:46,300
so let's go ahead and apply the H2 tags to our second heading

37
00:05:54,400 --> 00:06:04,100
in the H3 tag to our third heading.

38
00:06:04,150 --> 00:06:05,170
Now we'll save our file

39
00:06:18,950 --> 00:06:25,630
and there it is now we can see that that style rule was applied to having 1 2 and 3.