Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Write the CSS

6:22 with Treasure Porth

In this lesson, we’ll create and link a new stylesheet to our resume.html file. Inside the new stylesheet, we’ll add some simple styles to introduce color and character to our resume!

Teacher's Notes
Video Transcript
Downloads

Creating new HTML pages is just the first step in developing a whole, cohesive website. We also need to make sure that we've applied the styles, colors, and designs we need to make our website pop!

In most cases, we'll want all of our HTML files to link to the same stylesheet used by our other pages. This helps to introduce consistency, because we can share the same styles and class designs to every page on our site. However, in this example exercise we'll create a new, unique stylesheet just for our Resume.

<link rel="stylesheet" href="resume.css">

We place the stylesheet link in the <head> section of our HTML file, where the important system and browser information is. You can think of the <head> section as the brains of your page. As Treasure mentions in the video, you'll also need to think about where the css file is located in your file directory - but we'll talk more about that in a later video.

New Attributes

Further Reading: :

How to Link a Stylesheet

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

You need to sign up for Treehouse in order to download course files.

Sign up