1 00:00:00,570 --> 00:00:02,030 Hello and welcome. 2 00:00:02,050 --> 00:00:14,100 In this video I'm going to position and style our page title already applied some basic styling already 3 00:00:14,520 --> 00:00:21,090 pumped is going to add more to enhance the page title. 4 00:00:21,210 --> 00:00:23,660 So this is a page title at the moment. 5 00:00:23,660 --> 00:00:25,670 It just says hello world. 6 00:00:25,820 --> 00:00:27,250 And this is a stylin. 7 00:00:27,260 --> 00:00:36,060 I've already applied to it's got a font size of six to five pixels and line the text to the centre. 8 00:00:36,060 --> 00:00:42,290 So I'm going to add margene and more so going to add some padding. 9 00:00:42,540 --> 00:00:49,660 And when I give it a colour and I'm also going to apply teks Shadow propertys. 10 00:00:50,520 --> 00:00:59,580 So you may notice there's a gap here at the top of the body from the page title. 11 00:00:59,580 --> 00:01:09,510 Basically this happens because the Web browser applies its default styling to the one element it is 12 00:01:09,510 --> 00:01:13,940 also not just at 81 and the minute it does that all the elements as well. 13 00:01:14,160 --> 00:01:22,680 So even when you haven't applied any thesis at all there is some basic default CNS that web browser 14 00:01:22,800 --> 00:01:23,550 applies. 15 00:01:23,790 --> 00:01:28,860 So that's why it's important to add your own success to override that. 16 00:01:28,920 --> 00:01:30,800 So let's get rid of this gap here. 17 00:01:30,790 --> 00:01:32,370 Other top to do that. 18 00:01:32,370 --> 00:01:34,720 I'm going to set the margin to zero. 19 00:01:34,890 --> 00:01:44,400 So inside my head each one element here I'm going to type in margin which is this here and I'm going 20 00:01:44,400 --> 00:01:52,470 to send that to zero and that should get you can see here it's got rid of that space the massive space 21 00:01:52,470 --> 00:01:55,760 at the top the body element it's got rid of that. 22 00:01:56,100 --> 00:02:06,090 So that's what that does next and I'm going to do is apply padding so padian refers to the space inside 23 00:02:06,270 --> 00:02:08,120 the elemental content. 24 00:02:08,130 --> 00:02:18,540 So our typing pad in and I'm going to give it two values going to make it 20 pixels and zero. 25 00:02:18,960 --> 00:02:28,920 So when the padian has two values the first value is applied to the top and the bottom then and the 26 00:02:28,920 --> 00:02:39,500 second value is applying to the left and the right side padding 220 pixels will go to the top and bottom. 27 00:02:39,590 --> 00:02:47,580 Why is there were two left and right the next and I wanted to give my title I want to give it a call 28 00:02:47,850 --> 00:02:49,180 unicol. 29 00:02:49,350 --> 00:02:54,660 So colour is different from background colour background colour. 30 00:02:54,960 --> 00:03:00,510 It's this one here applies to the background so Quello if you want to change the colour of the text 31 00:03:01,020 --> 00:03:03,760 you the property is this colour. 32 00:03:03,910 --> 00:03:09,970 So I'm typing colour and high one and make this. 33 00:03:10,600 --> 00:03:14,220 Let's look at the colours they have here. 34 00:03:14,220 --> 00:03:22,150 I want something sky blue something deep sky blue right. 35 00:03:22,160 --> 00:03:30,720 I like this once I make it deep skyblue you can see there that's the deep skyblue just going to see 36 00:03:30,750 --> 00:03:32,210 that. 37 00:03:33,250 --> 00:03:34,030 Okay. 38 00:03:34,080 --> 00:03:40,160 One good thing about this Ed is that as you make changes it reflects straightaway in the web browser 39 00:03:40,190 --> 00:03:49,650 will do doesn't actually save it on to you save it but it can enable you to see the impact of your success 40 00:03:49,710 --> 00:03:50,860 immediately. 41 00:03:52,480 --> 00:03:58,040 The next property I want to add is called Text shadow. 42 00:03:58,570 --> 00:03:59,390 What that does. 43 00:03:59,410 --> 00:04:06,130 It applies a text shadel to the text content of the element. 44 00:04:06,160 --> 00:04:09,240 It basically has four values. 45 00:04:09,430 --> 00:04:15,300 So to haddi Text the property just type in text. 46 00:04:16,120 --> 00:04:19,640 That's shadow. 47 00:04:19,730 --> 00:04:37,370 And I'll give it the values I make is three pixels three pixels one pixel and give it a black colour. 48 00:04:38,380 --> 00:04:46,820 So you can see the fact that the effect of the total shadow you can see here how it impacts on the title. 49 00:04:46,840 --> 00:04:56,200 So let me go through the values with the first pixel value which is this one here. 50 00:04:56,200 --> 00:05:05,460 The first three Pixel the first picks of value sets the horizontal offset of the shadow from the text. 51 00:05:05,500 --> 00:05:14,570 Basically it indicates how far it moves across a negative value should move it to the left. 52 00:05:15,100 --> 00:05:23,650 Now the second pixel value which is the second three pixel here is used to set the vertical offset of 53 00:05:23,650 --> 00:05:25,990 the shadow from the text. 54 00:05:26,230 --> 00:05:30,400 How determines how far it moves down. 55 00:05:30,760 --> 00:05:41,230 In the example I've given a negative value we'll move it up the third peaks of value which is one pixel 56 00:05:41,800 --> 00:05:46,550 is used to set the radius of the shadow. 57 00:05:46,760 --> 00:05:56,380 All right give it a kanimbla a bigger value we mean it gives it a more blurry shadow and then the fault 58 00:05:56,410 --> 00:05:59,590 here which is black which is a colour. 59 00:05:59,630 --> 00:06:03,250 It says the bees call for the shadow. 60 00:06:03,340 --> 00:06:06,990 You can see the core is said to be black. 61 00:06:07,190 --> 00:06:16,070 But you can set it to anything so that's basically the values for this teks shadel property. 62 00:06:16,150 --> 00:06:22,690 You can try experimenting yourself with different values to see just to see what you come up with. 63 00:06:22,690 --> 00:06:28,980 It's always good to try and play around with different values and see what takes your fancy. 64 00:06:29,590 --> 00:06:41,110 So in this video I played around with some Seer says for our page title and I applied some extra Seer's 65 00:06:41,120 --> 00:06:42,820 as properties like texture. 66 00:06:42,830 --> 00:06:51,800 I give its colour property applied padding and also some margin sit for this. 67 00:06:51,800 --> 00:06:54,550 Who do you think you for watching and by phone.