Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this lesson, you will add simple styles to the web page.
Quick Reference:
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