1 00:00:05,450 --> 00:00:06,410 Welcome back. 2 00:00:06,410 --> 00:00:11,550 Let's go over the solution for the SS assessment by going through the tasks that see a SS file. 3 00:00:11,690 --> 00:00:12,010 OK. 4 00:00:12,020 --> 00:00:14,340 So here you have three major components open. 5 00:00:14,360 --> 00:00:16,670 One is the actual HVM l file. 6 00:00:16,670 --> 00:00:20,850 The second is the CSSA file and then the third is the link to the H-2 him. 7 00:00:20,900 --> 00:00:23,870 In my browser so I refresh this right now. 8 00:00:23,880 --> 00:00:25,720 Notice there's no styling on this. 9 00:00:25,720 --> 00:00:26,580 H tim L. 10 00:00:26,840 --> 00:00:33,080 When I'm going to do now is expand the CSSA file and I'll keep this tab open for each T.M. in case I 11 00:00:33,080 --> 00:00:34,800 want to ever reference it. 12 00:00:35,180 --> 00:00:39,710 But right now we're just looking purely at the C Ss and our first task was to give the body element 13 00:00:39,710 --> 00:00:43,130 of the site a light gray background using a hex code. 14 00:00:43,130 --> 00:00:51,620 So the way we do that is we say body curly braces and we can do a background color like this or just 15 00:00:51,620 --> 00:01:01,410 background and the hex code I found by playing around with hex speaker is D-3 D-3 the three scientists 16 00:01:01,420 --> 00:01:09,560 say that refresh my browser and now I see this light gray background task number 2 was to change H-1 17 00:01:09,570 --> 00:01:13,270 to have a four pixel solid black border and to center that text. 18 00:01:13,550 --> 00:01:22,970 So to try to say H-1 the border we can do this in one single line by saying one pixel solid black. 19 00:01:22,970 --> 00:01:25,450 So my Kolins and that property value pair. 20 00:01:25,820 --> 00:01:32,470 And then remember we can say text align and we can say Center save that refresh. 21 00:01:32,570 --> 00:01:33,320 And now I see. 22 00:01:33,320 --> 00:01:39,950 Welcome to puppie blog has that border and it's been centered task number three it was to make all H-2 23 00:01:39,980 --> 00:01:41,930 elements the color purple. 24 00:01:41,930 --> 00:01:48,900 Easy enough we just say H-2 color and set it equal to purple. 25 00:01:48,980 --> 00:01:53,330 And when I refresh this page I should see these two heading TOS to be purple. 26 00:01:55,140 --> 00:02:01,440 Next was to take all the input tag boxes and make them have a five pixel solid dark blue border. 27 00:02:01,950 --> 00:02:05,280 So I'll say input and again there's two different ways of doing this. 28 00:02:05,280 --> 00:02:12,490 You can either specify all of these individually like lips border color give it the value dark blue 29 00:02:13,800 --> 00:02:21,660 and then grab border style and then give it the color solid or give it a style solid and then border 30 00:02:21,660 --> 00:02:25,440 with and then say something like five pixels. 31 00:02:25,450 --> 00:02:26,710 So that's one option. 32 00:02:26,710 --> 00:02:30,850 The other option would be to do what we did before and just say something like five pixels solid dark 33 00:02:30,850 --> 00:02:31,400 blue. 34 00:02:31,450 --> 00:02:33,560 It's up to you which styles you prefer. 35 00:02:33,580 --> 00:02:38,010 What's nice about doing them separately is that you get that nice autocomplete for the options. 36 00:02:38,050 --> 00:02:44,910 So if I refresh this now on the input email password and log in I see those thick dark blue borders. 37 00:02:45,190 --> 00:02:48,840 Task number six is that there's a text area element so if you scroll down. 38 00:02:48,940 --> 00:02:53,980 This thing is a text area element and I wanted it to have some specialized properties. 39 00:02:53,980 --> 00:03:06,320 So what we can do is since it has an ID text block I can do a hash tag text block and then say give 40 00:03:06,320 --> 00:03:07,400 it the border. 41 00:03:07,400 --> 00:03:13,790 In this case it wants a five pixel solid gray border and we can adjust the width and height simply by 42 00:03:13,790 --> 00:03:19,720 asking for those properties so I can say with 100 pixels and height. 43 00:03:19,850 --> 00:03:23,360 Notice how it just auto completes which is really convenient for pixels. 44 00:03:23,600 --> 00:03:27,770 Save those changes refresh and you'll see that change here. 45 00:03:27,770 --> 00:03:30,870 Notice I'm superzoom then and I have this browser quite small. 46 00:03:30,950 --> 00:03:37,210 So it's a little distorted on my screen test number 7 is there's a link to Google on the page make this 47 00:03:37,210 --> 00:03:38,000 link read. 48 00:03:38,260 --> 00:03:43,150 So since I know it's a link it must be an anchor tied and it's the only one on the page so I can just 49 00:03:43,150 --> 00:03:51,490 call anchor tag color red save that change and it here take you to Google so you can search for pups. 50 00:03:51,500 --> 00:03:52,540 I'll refresh this. 51 00:03:52,700 --> 00:03:59,450 And now it's red task number nine was to finally set all the font to be this all Drik font and it's 52 00:03:59,450 --> 00:04:00,560 actually already linked to. 53 00:04:00,560 --> 00:04:03,630 If you come over here it's the h t m l it's linked right here. 54 00:04:03,640 --> 00:04:05,950 Font's Google API all Drik. 55 00:04:05,990 --> 00:04:11,620 So what we need to do here is just if you Google that link they'll tell you what to do. 56 00:04:11,660 --> 00:04:21,640 I'm going to say body to grab everything and say font family and then essentially follow the instructions 57 00:04:21,640 --> 00:04:28,770 if you follow that link on Google which is just all Drik comma Sincero of say that. 58 00:04:28,900 --> 00:04:33,910 And when you refreshed this you'll notice this all everything in the body all the font family has changed. 59 00:04:34,000 --> 00:04:38,770 So that's a nice way to essentially grab all the font on the Web site and change it at once. 60 00:04:38,770 --> 00:04:41,710 That's why it was kind of a bonus task at the end. 61 00:04:41,790 --> 00:04:42,250 OK. 62 00:04:42,400 --> 00:04:45,300 If you have any questions feel free to post the Q&A forums. 63 00:04:45,370 --> 00:04:50,350 The main idea should be able to do now is understand that you can connect classes IDs and element tags 64 00:04:50,590 --> 00:04:55,370 from the C Ss chains or property values for styles and then affect your Each T.M.. 65 00:04:55,730 --> 00:04:56,960 OK that's it. 66 00:04:56,980 --> 00:04:58,120 We'll see at the next lecture.