We could link this page to our existing CSS document and write new styles there,

but for practice, let's create a link up, a fresh new CSS style sheet.

Start by creating a new CSS document.

In workspaces, go to file, new file and

name the new file resume.css.

Inside of the head of resume.html, we can link to this new CSS

file by typing link,

stylesheet, href,

resume.css.

In the href, you type the file path to the style sheet you want to link to.

In larger projects,

style sheets are often kept in a separate folder just to keep things organized.

You might keep your style sheets in a folder called CSS for instance.

In that case,

the path the you would type into the href would be CSS slash resume.css.

But since resume.css and resume.html are in the same folder,

just the file name will do.

Let's save this and

make sure the style sheet is linked up correctly by writing a rule.

In resume.css, let's select the h1 and change its color to blue.

Save that, refresh, and we know that the style sheet is linked up correctly

because the font color is now blue.

So, let's delete this rule for now and let's get started styling this resume.

The first style I want to write will apply to the whole document, so

I'm going to select body.

AndI want to change the font to Arial.

We do that with a CSS property called font family.

Assign font family to Arial, in quotes.

Refresh and you'll see the font of the entire document has changed.

Next let's make this image round.

I could style the image by selecting the image tag and the css, but

I might eventually use another image somewhere else in the document, and

I don't want all the images to be styled in the exact same way.

So I'll style this image by first adding a class attribute to it.

Resume.html.

Let's give the element a descriptive class like main image.

In the style sheet let's select a class that we put on the image, main image.

And remember that the dot is how you indicate that it's a class name.

Now we'll give it a border.

Remember, for border we need three values here, the border style, like dash, dotted,

or solid, the width of the border, and the color of the border.

I want my border to be solid, four pixels wide, and black.

Next, we'll give it a border radius of 50%, which will make the image round.

Let's save this.

And test it, and it has a border and the image is round.

Now lets use background color and padding on the H1.

It's pretty common a practice to have only one H1 per webpage.

So go ahead and select the H1 directly in the CSS.

We'll give the h1 a background color

that matches the gray that's used in the main profile project.

And I happen to know that that's a hexidecimal number, e2e2e2.

We'll have a look at that.

And that looks all right, but

as we saw in a previous video we can make it look a little better with some padding.

Remember that increasing the padding will increase the space between the text and

the edges or border of the box that it's in.

Adding more light grey space around this text.

So in your CSS add five pixels worth of padding on all sides.

Great.

Finally, let's add a style to the H2, Summary of Qualifications.

There might be other H2s on this page in the future.

Maybe somewhere in the footer or another area of the page.

I wanna give this headline its own look.

So I'll style it using a class selector.

First we'll find the element in resume.html and add a class to it.

We'll add a class called section title.

Now in resume.css,

create a rule for section title.

And in this rule, we'll use another CSS property called text transform,

which allows us to make the text upper or lower case.

All we have to do is type text transform and then upper case, and

everything between the h2 tags will be uppercase.

Why would we do this, though, instead of just typing the words in all uppercase?

Let me quickly show you.

Because this is a resume, we might want to add sections for education and employment.

I'll do that now.

We'll add and h2 for education.

And an h2 for employment.

Now I could type all three sections in all caps, but

if I wanted to change it later, I'd have to go back and retype everything.

If instead I add the section title class to the other h2s,

you'll see that they all become capitalized as well.

Just like that.

But if I change my mind later and decide I want to change it back,

I can simply delete this CSS rule or I can type capitalize

in just one place in the code, and as you can see they all change.

OK, there's still lot we could do with this resume page, but

we have a good start.

So in the next video, we'll learn how to link it up to the main profile page.