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