Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In our previous video we created the HTML for our profile card, but we didn’t change the appearance of our page. The browser is applying a bit of style to our page, but these are all default styles found in what’s known as the user agent stylesheet. The user agent stylesheet is the reason our headings are larger than our paragraphs, that our paragraphs have space underneath them, and our links are underlined and colored differently from the rest of our text. Relying on default styles isn’t too exciting, though, so let’s try creating a few styles of our own. Let’s switch over to our CSS file, called style.css, and get ready to write some CSS selectors.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our previous video, we created
the HTML for our profile card, but
0:00
we didn't change the appearance
of our page. The browser is
0:05
applying a bit of style to our page.
But these are all default styles
0:10
found in what's known as the
user agent stylesheet. The user
0:14
agent stylesheet is the reason
our headings are larger than our
0:20
bulleted list, that our headings
have space underneath them, and
0:24
our links are underlined and colored
differently from the rest of our text.
0:28
Relying on default styles
isn't too exciting though, so
0:35
let's try creating a few
styles of our own.
0:39
Let's switch over to our CSS
file called style.css, and
0:43
get ready to write
some CSS selectors.
0:48
CSS selectors define the elements
to which a set of CSS rules apply.
0:53
There are actually a few different
ways to select HTML content
0:59
to be styled. But for now let's
focus on type selectors,
1:04
in which we write the name of
the HTML element we'd like to style.
1:08
For example, if I'd like to make
changes to all my content in
1:13
my browser, I would start by
selecting the body tag.
1:18
Looks pretty different
from HTML, doesn't it?
1:24
The heart of each CSS selector
is found inside these left and right
1:28
curly braces, where we're able to
write one or more CSS declarations.
1:33
A CSS declaration consists of a
property you'd like to change on
1:51
the page, followed by the value
you'd like to change it to.
1:55
In this case, I first changed
the background color property
1:59
to a value called darkslategray, and
then changed the text color to white.
2:04
Note that a colon separates
the property from the value, and
2:12
that each CSS declaration
ends with a semicolon.
2:16
Save your page and try it out
in the browser, and nice work.
2:21
You've made a color change.
2:26
You might be wondering how I
came up with a funny sounding
2:32
color name like darkslategrey.
2:35
Did I memorize a
bunch of color names?
2:38
Not really. In fact,
succeeding as a
2:41
web developer has little
to do with memorization.
2:44
Your success depends on
practicing frequently,
2:47
as well as keeping
helpful resources handy,
2:51
such as this article on HTML color names
I've provided in the Teacher's Notes.
2:54
So if you're thinking, you know, I was
really hoping to pair lemonchiffon
3:00
text with an indigo background,
give it a try. Take a moment to
3:05
try out some different color
combinations before we move on.
3:09
Let's see what other changes
we can make to the body.
3:17
Here I've changed the font
used in my webpage.
3:29
I've asked the browser to
choose Arial, which is a
3:33
pretty common typeface
found on most user's machines.
3:35
I've also adjusted the margin property
to increase the amount of space
3:40
around my content.
3:44
The px measurement is short for
pixels, which is used for
3:47
measurement on a digital display.
3:50
If I increase that margin to
40 pixels, now the space
3:55
around my content measures 40
pixels rather than 20. The hyperlink
3:59
to Treehouse's website is pretty
hard to read on my darkslategray
4:05
background, so let's add another
type selector to change the color.
4:11
To do this, we need to select the HTML
element that creates hyperlinks.
4:17
See if you can remember
what that was.
4:23
If you said a, great job. We create
hyperlinks in HTML by writing a href.
4:28
But href is an attribute, so we won't
include that in our type selector.
4:36
Instead, we target only the anchor
tag to style the appearance
4:42
of the links on our page.
4:47
Next up, how about styling
our profile image?
4:57
I've included a width declaration here,
so if you're using a really large image,
5:15
you'll see it's grown
smaller in the browser.
5:20
I've also added a five pixel solid
white border around the image.
5:24
And the last line is
a pretty cool CSS trick.
5:30
Border-radius is normally used to
apply rounded corners. Let's try
5:35
setting that value to 25 pixels instead
of 50%, and you'll see what I mean.
5:40
Setting the border-radius back to
50% turns our image into a circle.
5:48
I've included an article on
border-radius in the Teacher's Notes
5:56
from a website
called CSS Tricks.
6:00
This is the kind of resource
developers refer to all the time
6:04
when writing code.
6:08
And you'll learn lots more
tricks like this one in
6:10
the Front-End Web Development
curriculum here at Treehouse.
6:13
Last but not least, I'd
like to style our list of skills.
6:19
I've applied some margin on
the left side of my bulleted
6:32
list to make it appear roughly
centered under my image.
6:36
I arrived at the number I'm using,
50 pixels, by trial and error.
6:42
If you're using longer or shorter lines
of text, try out different number values,
6:48
and test out how your bulleted
list looks in the browser.
6:53
My final declaration, line-height,
is used to increase the amount of
6:58
space in between each line of text, so
our list becomes a bit easier to read.
7:03
The value I've used, 200%,
sets the amount of space
7:09
separating each line of text to
twice the height of the text itself.
7:14
Well done, you've completed
a profile card using HTML and CSS.
7:22
There's nothing quite like the feeling
of checking out your first ever web
7:27
project in a browser.
7:32
Hopefully you enjoyed writing code
and seeing the results of your work.
7:34
And if you found yourself
struggling a bit, and had to
7:39
pause the video to back up and make
corrections, that's perfectly normal.
7:42
Even developers who have
been in the industry for
7:46
decades make mistakes all the time.
It's part of the learning process.
7:49
The important thing is to keep learning,
keep practicing, and keep having fun.
7:53
And don't forget to celebrate your
successes. You've coded your own
7:59
profile card with an interactive
hyperlink. Not everyone can say that.
8:04
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up