1 00:00:01,180 --> 00:00:02,340 Welcome. 2 00:00:02,600 --> 00:00:03,490 In that. 3 00:00:03,510 --> 00:00:08,750 I will introduce you to singer says I will also be explaining. 4 00:00:08,770 --> 00:00:18,940 Sears says rules set by rule said I mean this syntax or the way this structure is put together what 5 00:00:19,170 --> 00:00:20,950 I see is this. 6 00:00:21,040 --> 00:00:36,740 C stands for Cascading Style Sheets says describes how hastier mill elements should be displayed. 7 00:00:36,810 --> 00:00:49,710 This is what is referred to as style language and not a programming language says is the code used to 8 00:00:49,710 --> 00:00:52,690 style your web page. 9 00:00:53,550 --> 00:00:58,400 Just like a stylist can style your hair. 10 00:00:58,400 --> 00:01:03,550 You can you see a sense of style his tier male helmets. 11 00:01:03,720 --> 00:01:12,650 A typical example will be if you wanted to style all the power grab elements of your hastier email. 12 00:01:12,750 --> 00:01:17,430 If you want to turn the content on a text into read. 13 00:01:17,430 --> 00:01:20,240 This is how you would write the thesis. 14 00:01:20,460 --> 00:01:27,470 So the P will indicate be outroar selector which is hitting the element you trying to start. 15 00:01:27,860 --> 00:01:32,820 All the property that you are trying to apply. 16 00:01:32,850 --> 00:01:38,270 The blue will be the value for the property that you are trying to apply. 17 00:01:38,490 --> 00:01:46,440 So what this syntax is saying all those rules say it is saying I want to make all the paragraph element 18 00:01:46,850 --> 00:01:47,700 blue. 19 00:01:49,240 --> 00:01:55,540 Let's take a look at a typical says rule set. 20 00:01:56,080 --> 00:01:57,270 So they strong. 21 00:01:57,270 --> 00:02:05,240 Sure you can see on the screen is referred to as a rule set. 22 00:02:05,310 --> 00:02:09,000 It's often called rule for short. 23 00:02:09,070 --> 00:02:13,500 So let me quickly run through the syntax here. 24 00:02:13,720 --> 00:02:23,050 So when you want to apply a says to his team eliminate the very first thing you do is you have to specify 25 00:02:23,550 --> 00:02:28,450 the element and that is referred to as a selector. 26 00:02:28,600 --> 00:02:34,570 So in this case the P here is to select top which is the hastier male element. 27 00:02:34,660 --> 00:02:39,560 I want to apply styling to next thing to do. 28 00:02:39,640 --> 00:02:47,770 You need to put in an open calibrates and clausing calibrate very important. 29 00:02:47,950 --> 00:02:56,360 You had the curly braces and inside the curly braces is where you actually ebright csx. 30 00:02:56,650 --> 00:03:00,190 So it contains all different parts. 31 00:03:00,340 --> 00:03:04,210 So the connole here you can apply any property. 32 00:03:04,210 --> 00:03:09,830 The column basically is just one of many properties that you can use to style. 33 00:03:09,880 --> 00:03:19,810 Here's tier mail elements in this illustration style in the paragraph element with the column property 34 00:03:20,050 --> 00:03:26,600 is going to change the colour of all elements that have got the p tag. 35 00:03:26,800 --> 00:03:35,890 Okay so the connole is referred to as a property and then you call on it's very important you have to 36 00:03:35,890 --> 00:03:42,010 separate the property from the property value with the colony can see the school on here. 37 00:03:42,010 --> 00:03:46,170 Once you've indicated the property then you have to give it. 38 00:03:46,450 --> 00:03:49,590 And this is known as the property value. 39 00:03:49,780 --> 00:03:58,750 In this example I'm stylin the paragraph tag which is is P which is a select or change in the column 40 00:03:58,780 --> 00:04:01,490 property to papau. 41 00:04:01,660 --> 00:04:08,150 Okay so that's how you do it and when you finish you have to end it with a semicolon. 42 00:04:08,500 --> 00:04:13,050 Cynical and very important because it tells this here's this rule set. 43 00:04:13,060 --> 00:04:15,760 This is the end of this declaration. 44 00:04:15,760 --> 00:04:23,800 So the entire thing here from the call of property to the property value is called a declaration. 45 00:04:23,830 --> 00:04:28,280 So these are the various parts of his thesis ruleset. 46 00:04:28,390 --> 00:04:34,290 Before you can apply this to an element you need to consider all these various parts. 47 00:04:34,380 --> 00:04:38,050 In this illustration I've just got a single rule here. 48 00:04:38,080 --> 00:04:40,600 You can have multiple for example. 49 00:04:40,600 --> 00:04:47,230 I could decide to add more properties because just one property I could add this size which is another 50 00:04:47,230 --> 00:04:54,550 property and then give the size value so there are different properties you can apply to an aged element 51 00:04:54,550 --> 00:04:55,660 to style it. 52 00:04:55,750 --> 00:05:03,020 So the key points to note here is that don't forget the semicolon if you forget the semicolon on the 53 00:05:03,160 --> 00:05:04,390 styling will not work. 54 00:05:04,390 --> 00:05:06,240 It will not be applied. 55 00:05:06,460 --> 00:05:15,810 So dont forget that and also dont forget to separate the property you're trying to start from the value. 56 00:05:16,110 --> 00:05:19,730 So property value must be separated with a colon. 57 00:05:19,930 --> 00:05:22,960 And don't forget the opening and curly braces. 58 00:05:23,350 --> 00:05:30,600 Your property value must be contained in between the curly braces. 59 00:05:30,790 --> 00:05:36,870 So you have to start off with a select top being hastier male element you want to start. 60 00:05:36,870 --> 00:05:39,360 You can start many many selectors. 61 00:05:39,370 --> 00:05:45,490 You can also style multiple selections at a time by separating it one with a car. 62 00:05:45,640 --> 00:05:48,850 In this illustration just to make things keep things simple. 63 00:05:49,080 --> 00:05:53,710 Im just using one selector in this video. 64 00:05:53,710 --> 00:06:02,430 I explained what theosis means and also illustrated how a Seer says ruleset works. 65 00:06:02,560 --> 00:06:04,880 Thank you for watching and bye for now.