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
With the content and padding areas defined, let's style the border area of our box. There are three properties we’ll use to create and style borders.
Further reading
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
With the padding area defined, let's
style the border area of our header box.
0:00
There are three properties we'll
use to create and style borders.
0:07
First, we can set the
width of a border.
0:11
We do that with the
border-width property.
0:14
We can define the border width value
with any length or percentage units,
0:19
or choose from three keyword
values: thin, medium and thick.
0:24
I'm going to go with 12 pixels
for my border. When you preview
0:30
your page in the browser,
no border shows up yet.
0:35
In order to actually see the border,
we'll need to define a border style.
0:39
The border-style property is what sets
the style of the element's borders.
0:49
You'll most commonly choose solid
to make the border a solid line.
0:54
But a variety of styles are available,
such as a dashed or dotted line.
0:59
Our border is showing in the browser,
but as we haven't declared a color,
1:07
the border has inherited
the text color for the header.
1:12
A ghostwhite border on a white
page background is awfully
1:16
hard to see. So how about
declaring a border color?
1:20
The border-color values
can use a hexadecimal or
1:26
RGBA value, as well as any
of the keyword color values.
1:31
And there we go.
1:38
Now there's an orange 12 pixel
border on all four sides.
1:40
And if I check out my element
Inspector, I can see my CSS box
1:45
is getting larger. For example,
if I'm wondering how tall my box is,
1:50
I notice that the content is 18
pixels tall. But there's also 10
1:55
pixels of padding and 12 pixels
of border on the top and bottom.
2:01
Add that all up, and my header
box is now 62 pixels tall.
2:06
To confirm that,
I'll hover over the
2:12
header element in the HTML
window of my Inspector.
2:15
And sure enough,
the height is 62 pixels.
2:19
We learned in the last video
that shorthand methods
2:24
can help us simplify our
padding declarations.
2:28
If I change my border-width
declaration to the following,
2:32
What change do you suppose
will happen in the browser?
2:39
If you said we'd see 16 pixels of border
on the top, 24 pixels on the right,
2:46
8 on the bottom and
12 on the left, then great job.
2:53
You remembered that the shorthand
applies these values clockwise,
2:59
top, right, bottom, left.
These shorthands work
3:03
for your border-style and
border-color properties as well.
3:08
The border is now dashed on the
top and bottom and solid
3:23
on the sides. And since we specified
only three border colors, orchid
3:28
was applied to both
the right and left.
3:32
Now, that border looked pretty wild,
and most of the time you'll only need
3:40
a single border width, border style
and border color. So let me press
3:45
Cmd+Z a few times and back
up to my previous declarations.
3:51
This series of simple border
declarations can be shortened even
3:57
further using a shorthand belonging
to the CSS border property.
4:01
Nice and simple.
4:11
In the browser, I'm back to a 12
pixel solid border on all four sides.
4:13
If you're wondering whether
the order of the values matters,
4:21
I'll try switching them around.
4:24
And that still works
in the browser.
4:32
The order I originally wrote,
however–width, then style,
4:35
then color–is preferred
by most developers.
4:40
Now, let's say that I wanted to
override a single property here.
4:45
Perhaps I'd like to make my border
a darker orange on the bottom.
4:49
Hmm. That didn't work.
5:00
Let's see if we can
troubleshoot why.
5:03
I'll try validating my CSS
using the W3C validator.
5:06
And it looks like no errors are found,
so all my declarations are valid.
5:15
I'll give you a moment here to
see if you can figure out why
5:22
it's not working.
5:25
If your answer was the
cascade, nice going.
5:32
One of the key attributes of
the cascade is source order.
5:36
If two declarations have
the same specificity,
5:41
the declaration that comes
last is given more weight.
5:44
So if I reverse these declarations,
5:48
now we're seeing a darker
border on the bottom.
5:58
Identifying that cascade issue
took a bit of creative thinking,
6:02
but that's part of your
role as a developer.
6:06
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