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 learn about the following CSS attributes: text-align, border, and border-radius.
We've just learned how to select
an HTML element and style it with CSS.
0:00
But what if we wanna style
a specific instance of an element
0:05
when there is more than one
of that element on the page?
0:08
How can we style just
one of these h2 tags?
0:11
One of the ways we can
do that is with classes.
0:14
Classes are attributes we
can add to HTML elements.
0:18
Then we can write a CSS rule for
0:21
that class and any element that we add
that class to will get those styles.
0:23
Let's see how that works.
0:28
We'll start by putting a class
on this background h2.
0:29
Let's find that in index.html
0:32
You type a class just like
any other HTML attribute,
0:39
inside the carets with an equal sign and
a set of quotes.
0:43
You can name a class anything you want but
0:47
class names often describe
the elements they're placed on.
0:49
The h2 we're working with is nested
inside a section of code called card.
0:52
This h2 is kind of like the title for
the card.
0:57
So let's call the class card-title.
0:59
Now that we've created a class, we can
write a CSS rule for it in styles.css.
1:03
We indicate that the element
that we're styling is a class
1:10
by putting a dot in front of it,
like this.
1:12
That dot tells the web browser
that it should look for
1:16
a class attribute called card-title
that exists on an HTML element.
1:19
If you left off the dot in your CSS,
then the browser would think
1:24
that it needed to find
an HTML tag named card-title.
1:29
And when it couldn't find one,
it would get confused and
1:33
simply ignore your style instructions.
1:35
After you type card-title,
type your curly braces.
1:37
And let's change this h2 so
that it's centered.
1:43
The CSS style for
that is called text-align.
1:46
And now we need a value.
1:50
Text-align has a few possible values that
you're probably familiar with from using
1:51
word processors like Word or Google Vox.
1:55
We can tell it to align left,
right, centered or justified.
1:58
By default, text is left-aligned.
2:01
So let's type center, and
don't forget your semicolon.
2:04
Refresh, and now this h2 is centered.
2:10
Next, we'll add a border around the h2.
2:13
I could just tell you how to add a border,
but searching for
2:16
CSS properties is
something you'll do a lot.
2:18
There are so many CSS properties that even
seasoned developers need to look them up.
2:20
One of my favorite CSS reference
sites is called css-tricks.com.
2:25
Click on Almanac.
2:30
And now we have a nice,
long list of CSS selectors and properties.
2:32
Scroll down and look for
the border property.
2:37
The first thing they
give us is an example.
2:43
As you can see, the border property
has three values set to it,
2:45
3px, solid, and red.
2:49
Scroll a little bit farther down and
look at the example of the syntax.
2:52
This first number, 3px,
controls the border width.
2:57
It determines how thick
the border will be.
3:01
The second value determines
the border style,
3:03
which is set to solid in this example, but
you can tell it to be dashed, doubled, or
3:06
any number other of styling options.
3:10
The third value determines
the color of the border.
3:13
These values can actually
be entered in any order.
3:15
You could list the color first,
for example.
3:19
Go back to styles.css,
give the card-title class a border,
3:22
a solid black border that is 3px wide.
3:28
That's the order I like to say it.
3:33
It helps me remember what values to enter,
so
3:34
that's the order that
I'm going to type it.
3:37
Let's refresh, and
now this background h2 has a border.
3:41
Now that we have a border, we can give
this element a border radius property.
3:46
A border radius is basically
a fancy way to say curbed border.
3:49
We won't get into the technical details
of border radius in this course, but
3:54
we can play around with it and
see how it works.
3:57
Go back to styles.css and
4:00
give the card-title class
a border-radius of 5px.
4:02
Now you can see that the corners
of the border are rounded.
4:10
Try giving the border a radius of 10px.
4:14
And you can see they
get even more rounded.
4:21
The higher the value,
the more rounded the corners.
4:24
The border radius property
will also take a percentage.
4:26
Make this value 50% and you'll
4:32
see that all the corners
are now completely rounded.
4:38
You can even use border radius
to make an element circular.
4:41
Take our main profile image as an example.
4:46
It's actually a square image with
a 50% border radius applied to it,
4:49
making it completely round.
4:53
Now, you know how to target
specific elements for
4:55
CSS styling both by HTML element and
by class name.
4:57
But what if we wanted to specifically
target multiple elements?
5:02
You'll learn all about that,
along with more useful CSS properties,
5:05
in the next video.
5:09
You need to sign up for Treehouse in order to download course files.
Sign up