Write the CSS

We could link this page to our existing CSS document and write new styles there, 0:00 but for practice, let's create a link up, a fresh new CSS style sheet. 0:04 Start by creating a new CSS document. 0:09 In workspaces, go to file, new file and 0:12 name the new file resume.css. 0:16 Inside of the head of resume.html, we can link to this new CSS 0:20 file by typing link, 0:25 stylesheet, href, 0:30 resume.css. 0:35 In the href, you type the file path to the style sheet you want to link to. 0:38 In larger projects, 0:43 style sheets are often kept in a separate folder just to keep things organized. 0:44 You might keep your style sheets in a folder called CSS for instance. 0:47 In that case, 0:52 the path the you would type into the href would be CSS slash resume.css. 0:53 But since resume.css and resume.html are in the same folder, 0:58 just the file name will do. 1:03 Let's save this and 1:08 make sure the style sheet is linked up correctly by writing a rule. 1:09 In resume.css, let's select the h1 and change its color to blue. 1:12 Save that, refresh, and we know that the style sheet is linked up correctly 1:21 because the font color is now blue. 1:26 So, let's delete this rule for now and let's get started styling this resume. 1:30 The first style I want to write will apply to the whole document, so 1:35 I'm going to select body. 1:39 AndI want to change the font to Arial. 1:41 We do that with a CSS property called font family. 1:46 Assign font family to Arial, in quotes. 1:50 Refresh and you'll see the font of the entire document has changed. 1:56 Next let's make this image round. 2:00 I could style the image by selecting the image tag and the css, but 2:02 I might eventually use another image somewhere else in the document, and 2:06 I don't want all the images to be styled in the exact same way. 2:09 So I'll style this image by first adding a class attribute to it. 2:13 Resume.html. 2:16 Let's give the element a descriptive class like main image. 2:23 In the style sheet let's select a class that we put on the image, main image. 2:32 And remember that the dot is how you indicate that it's a class name. 2:42 Now we'll give it a border. 2:47 Remember, for border we need three values here, the border style, like dash, dotted, 2:50 or solid, the width of the border, and the color of the border. 2:54 I want my border to be solid, four pixels wide, and black. 2:58 Next, we'll give it a border radius of 50%, which will make the image round. 3:03 Let's save this. 3:12 And test it, and it has a border and the image is round. 3:14 Now lets use background color and padding on the H1. 3:18 It's pretty common a practice to have only one H1 per webpage. 3:21 So go ahead and select the H1 directly in the CSS. 3:26 We'll give the h1 a background color 3:33 that matches the gray that's used in the main profile project. 3:37 And I happen to know that that's a hexidecimal number, e2e2e2. 3:41 We'll have a look at that. 3:47 And that looks all right, but 3:50 as we saw in a previous video we can make it look a little better with some padding. 3:51 Remember that increasing the padding will increase the space between the text and 3:55 the edges or border of the box that it's in. 3:59 Adding more light grey space around this text. 4:02 So in your CSS add five pixels worth of padding on all sides. 4:05 Great. 4:14 Finally, let's add a style to the H2, Summary of Qualifications. 4:15 There might be other H2s on this page in the future. 4:20 Maybe somewhere in the footer or another area of the page. 4:23 I wanna give this headline its own look. 4:26 So I'll style it using a class selector. 4:28 First we'll find the element in resume.html and add a class to it. 4:30 We'll add a class called section title. 4:36 Now in resume.css, 4:38 create a rule for section title. 4:43 And in this rule, we'll use another CSS property called text transform, 4:51 which allows us to make the text upper or lower case. 4:57 All we have to do is type text transform and then upper case, and 5:00 everything between the h2 tags will be uppercase. 5:06 Why would we do this, though, instead of just typing the words in all uppercase? 5:10 Let me quickly show you. 5:15 Because this is a resume, we might want to add sections for education and employment. 5:17 I'll do that now. 5:24 We'll add and h2 for education. 5:25 And an h2 for employment. 5:31 Now I could type all three sections in all caps, but 5:36 if I wanted to change it later, I'd have to go back and retype everything. 5:40 If instead I add the section title class to the other h2s, 5:44 you'll see that they all become capitalized as well. 5:48 Just like that. 5:56 But if I change my mind later and decide I want to change it back, 5:57 I can simply delete this CSS rule or I can type capitalize 6:01 in just one place in the code, and as you can see they all change. 6:07 OK, there's still lot we could do with this resume page, but 6:12 we have a good start. 6:16 So in the next video, we'll learn how to link it up to the main profile page. 6:17