1 00:00:00,080 --> 00:00:04,470 We could link this page to our existing CSS document and write new styles there, 2 00:00:04,470 --> 00:00:09,240 but for practice, let's create a link up, a fresh new CSS style sheet. 3 00:00:09,240 --> 00:00:12,410 Start by creating a new CSS document. 4 00:00:12,410 --> 00:00:16,310 In workspaces, go to file, new file and 5 00:00:16,310 --> 00:00:20,880 name the new file resume.css. 6 00:00:20,880 --> 00:00:25,863 Inside of the head of resume.html, we can link to this new CSS 7 00:00:25,863 --> 00:00:30,859 file by typing link, 8 00:00:30,859 --> 00:00:35,227 stylesheet, href, 9 00:00:35,227 --> 00:00:38,660 resume.css. 10 00:00:38,660 --> 00:00:43,420 In the href, you type the file path to the style sheet you want to link to. 11 00:00:43,420 --> 00:00:44,520 In larger projects, 12 00:00:44,520 --> 00:00:47,860 style sheets are often kept in a separate folder just to keep things organized. 13 00:00:47,860 --> 00:00:52,840 You might keep your style sheets in a folder called CSS for instance. 14 00:00:52,840 --> 00:00:53,670 In that case, 15 00:00:53,670 --> 00:00:58,735 the path the you would type into the href would be CSS slash resume.css. 16 00:00:58,735 --> 00:01:03,873 But since resume.css and resume.html are in the same folder, 17 00:01:03,873 --> 00:01:06,070 just the file name will do. 18 00:01:08,205 --> 00:01:09,200 Let's save this and 19 00:01:09,200 --> 00:01:12,740 make sure the style sheet is linked up correctly by writing a rule. 20 00:01:12,740 --> 00:01:20,390 In resume.css, let's select the h1 and change its color to blue. 21 00:01:21,710 --> 00:01:26,800 Save that, refresh, and we know that the style sheet is linked up correctly 22 00:01:26,800 --> 00:01:28,990 because the font color is now blue. 23 00:01:30,250 --> 00:01:35,850 So, let's delete this rule for now and let's get started styling this resume. 24 00:01:35,850 --> 00:01:39,290 The first style I want to write will apply to the whole document, so 25 00:01:39,290 --> 00:01:41,325 I'm going to select body. 26 00:01:41,325 --> 00:01:46,510 And I want to change the font to Arial. 27 00:01:46,510 --> 00:01:50,067 We do that with a CSS property called font family. 28 00:01:50,067 --> 00:01:53,124 Assign font family to Arial, in quotes. 29 00:01:56,575 --> 00:02:00,385 Refresh and you'll see the font of the entire document has changed. 30 00:02:00,385 --> 00:02:02,515 Next let's make this image round. 31 00:02:02,515 --> 00:02:06,415 I could style the image by selecting the image tag and the css, but 32 00:02:06,415 --> 00:02:09,795 I might eventually use another image somewhere else in the document, and 33 00:02:09,795 --> 00:02:13,640 I don't want all the images to be styled in the exact same way. 34 00:02:13,640 --> 00:02:16,815 So I'll style this image by first adding a class attribute to it. 35 00:02:16,815 --> 00:02:23,720 Resume.html. 36 00:02:23,720 --> 00:02:28,692 Let's give the element a descriptive class like main image. 37 00:02:32,601 --> 00:02:41,180 In the style sheet let's select a class that we put on the image, main image. 38 00:02:42,800 --> 00:02:46,460 And remember that the dot is how you indicate that it's a class name. 39 00:02:47,620 --> 00:02:48,570 Now we'll give it a border. 40 00:02:50,070 --> 00:02:54,440 Remember, for border we need three values here, the border style, like dash, dotted, 41 00:02:54,440 --> 00:02:58,500 or solid, the width of the border, and the color of the border. 42 00:02:58,500 --> 00:03:03,620 I want my border to be solid, four pixels wide, and black. 43 00:03:03,620 --> 00:03:12,020 Next, we'll give it a border radius of 50%, which will make the image round. 44 00:03:12,020 --> 00:03:12,950 Let's save this. 45 00:03:14,540 --> 00:03:18,650 And test it, and it has a border and the image is round. 46 00:03:18,650 --> 00:03:21,516 Now lets use background color and padding on the H1. 47 00:03:21,516 --> 00:03:26,100 It's pretty common a practice to have only one H1 per webpage. 48 00:03:26,100 --> 00:03:30,570 So go ahead and select the H1 directly in the CSS. 49 00:03:33,010 --> 00:03:36,250 We'll give the h1 a background color 50 00:03:37,490 --> 00:03:41,920 that matches the gray that's used in the main profile project. 51 00:03:41,920 --> 00:03:47,490 And I happen to know that that's a hexidecimal number, e2e2e2. 52 00:03:47,490 --> 00:03:50,610 We'll have a look at that. 53 00:03:50,610 --> 00:03:51,740 And that looks all right, but 54 00:03:51,740 --> 00:03:55,540 as we saw in a previous video we can make it look a little better with some padding. 55 00:03:55,540 --> 00:03:59,570 Remember that increasing the padding will increase the space between the text and 56 00:03:59,570 --> 00:04:02,590 the edges or border of the box that it's in. 57 00:04:02,590 --> 00:04:05,650 Adding more light grey space around this text. 58 00:04:05,650 --> 00:04:10,769 So in your CSS add five pixels worth of padding on all sides. 59 00:04:14,820 --> 00:04:15,790 Great. 60 00:04:15,790 --> 00:04:20,560 Finally, let's add a style to the H2, Summary of Qualifications. 61 00:04:20,560 --> 00:04:23,240 There might be other H2s on this page in the future. 62 00:04:23,240 --> 00:04:26,530 Maybe somewhere in the footer or another area of the page. 63 00:04:26,530 --> 00:04:28,390 I wanna give this headline its own look. 64 00:04:28,390 --> 00:04:30,870 So I'll style it using a class selector. 65 00:04:30,870 --> 00:04:35,050 First we'll find the element in resume.html and add a class to it. 66 00:04:36,290 --> 00:04:38,636 We'll add a class called section title. 67 00:04:38,636 --> 00:04:43,489 Now in resume.css, 68 00:04:43,489 --> 00:04:46,900 create a rule for section title. 69 00:04:51,230 --> 00:04:55,750 And in this rule, we'll use another CSS property called text transform, 70 00:04:57,400 --> 00:05:00,910 which allows us to make the text upper or lower case. 71 00:05:00,910 --> 00:05:06,320 All we have to do is type text transform and then upper case, and 72 00:05:06,320 --> 00:05:10,770 everything between the h2 tags will be uppercase. 73 00:05:10,770 --> 00:05:14,460 Why would we do this, though, instead of just typing the words in all uppercase? 74 00:05:15,780 --> 00:05:17,590 Let me quickly show you. 75 00:05:17,590 --> 00:05:23,310 Because this is a resume, we might want to add sections for education and employment. 76 00:05:24,680 --> 00:05:25,600 I'll do that now. 77 00:05:25,600 --> 00:05:29,200 We'll add and h2 for education. 78 00:05:31,850 --> 00:05:36,840 And an h2 for employment. 79 00:05:36,840 --> 00:05:40,140 Now I could type all three sections in all caps, but 80 00:05:40,140 --> 00:05:44,720 if I wanted to change it later, I'd have to go back and retype everything. 81 00:05:44,720 --> 00:05:48,478 If instead I add the section title class to the other h2s, 82 00:05:48,478 --> 00:05:52,020 you'll see that they all become capitalized as well. 83 00:05:56,382 --> 00:05:57,640 Just like that. 84 00:05:57,640 --> 00:06:01,210 But if I change my mind later and decide I want to change it back, 85 00:06:01,210 --> 00:06:06,150 I can simply delete this CSS rule or I can type capitalize 86 00:06:07,910 --> 00:06:12,485 in just one place in the code, and as you can see they all change. 87 00:06:12,485 --> 00:06:16,880 OK, there's still lot we could do with this resume page, but 88 00:06:16,880 --> 00:06:17,950 we have a good start. 89 00:06:17,950 --> 00:06:21,430 So in the next video, we'll learn how to link it up to the main profile page.