This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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
By default, an element's width and height are as wide or as tall as the content it holds. But we're able to set our own dimensions with the width and height properties.
[MUSIC]
0:00
So, now let's see how everything we've
learned so
0:04
far about the box model applies to
building a basic layout.
0:07
So, by default, an element's width and
height are as wide or
0:11
as tall as the content it holds.
0:15
But we're also able to set our own
dimensions using the width and
0:18
height properties.
0:21
Now, the width and height properties can
accept length units such as pixels,
0:23
ems, or percentages and their values.
0:28
In the previous stage, we learned that
when we use a percentage value for
0:30
width, the width is measured relative to
the parent element's width.
0:35
So, the 60% width value we gave our
primary and secondary-content
0:38
divs earlier adjust based on the parent
body element, which is 100% by default.
0:45
But pixel values are still commonly used
for layout because, as we've learned in
0:52
previous videos, they allow us precise
control over the size of an element.
0:56
For instance, you'll notice this large
arrow image in our header.
1:02
Now, the arrow image is embedded as an
SVG, or Scalable Vector Graphics.
1:07
So, we'll need to scale it down with a
width property.
1:12
So, let's give the image element on line
ten a class of arrow.
1:15
So, now let's save our index.html file and
go back to our style sheet.
1:23
And all the way at the bottom underneath
the wildlife rule, let's go ahead and
1:28
target that new arrow class.
1:32
And we're gonna give our arrow rule a
width property, and
1:37
let's set the value to 50 pixels.
1:41
So let's save our style sheet, and
1:45
go back to the browser preview and refresh
the page.
1:46
So, now we can see how our arrow image is
now
1:50
scaled down to 50 pixels wide while
maintaining its proportions.
1:53
So, next for our Lake Tahoe page design,
1:59
we'll want to increase the height of our
main header element.
2:02
So, let's do that with a height property.
2:05
We'll go back to our style sheet, and
2:08
let's scroll up to the main header rule
right here under Main Styles.
2:10
And right beneath the background-color
property, let's add a height property.
2:16
And we're going to set the height value to
850 pixels.
2:21
All right, so let's take a look.
2:25
We'll save our style sheet and refresh the
page, and
2:26
now we see how our header is much taller.
2:30
And we're going to use this space later
when we
2:33
add a nice background image to our header.
2:36
Keep in mind that when a width or height
is defined on a element, we're not exactly
2:39
defining the entire area of the box,
meaning the content, padding and borders.
2:43
We're actually just defining the width for
the content area itself, and
2:49
this can actually create some issues,
especially when building layouts.
2:53
I'll show you what I mean.
2:56
So, let's go back to our main header rule,
and we're gonna add a padding-top
2:58
property, and we're going to set the top
padding to 170 pixels.
3:03
Now, when we add the top padding,
3:09
notice how the height of the header
increases by 170 pixels.
3:12
And if we once again open up our Chrome
developer tools by clicking the right top
3:18
icon menu here, then highlighting More
tools, then clicking Developer tools,
3:23
when we inspect the height of our header,
notice how instead of being 850 pixels
3:29
tall like we need it to be, our header's
actually 1,020 pixels tall.
3:35
Well, that's happening because the
browser, based on the box model,
3:40
calculates a total height value by taking
the height value we define and
3:44
adding the padding-top value and any
padding-bottom or any top and
3:50
bottom border styles we define.
3:54
So, if we were to add borders to our
header or
3:56
bottom padding, the total height would
increase based on those additional values.
3:59
And if we scroll down, we're also seeing
that happening in our wildlife container.
4:03
The top border and
4:08
padding values are increasing of the total
height of the element.
4:09
And the same issue that happens with
height also happens with
4:14
the total width value of an element.
4:17
And this can make our layout elements
wider than they need to be.
4:19
I'll show you a good example of this.
4:22
So first, let's go back to our style
sheet, and let's find our primary and
4:24
secondary-content rules right here under
Layout Styles.
4:29
And let's set their width back to a fixed
width of 960 pixels.
4:34
So, we're going to replace the 60% width
value to 960 pixels.
4:39
So now if we save our style sheet and
refresh the browser,
4:45
we can see that our secondary and
primary-content is our 960 pixels wide.
4:49
But now, we'll want to add left and right
padding to the content divs just to
4:55
have a little separation between the
content page and the margins.
5:00
So, let's go back to our primary and
secondary-content rule, and
5:05
right beneath the width property, let's
add a padding-left property,
5:09
and let's set the value to 50 pixels.
5:15
And right below that, let's add a
padding-right property, and
5:18
let's set the value to 50 pixels as well.
5:23
So now when we save our style sheet and
5:26
take a look at our layout, and refresh the
page, and once again,
5:29
use the dev tools to inspect the primary
or secondary-content containers,
5:33
notice how the total width now expands to
1,060 pixels wide.
5:38
It's adding 100 pixels to the total width
because we've added 50 pixels of
5:43
padding to the left and right sides of the
div.
5:48
So, like with the height property, the
browser calculates the total width value
5:52
by adding the width value we define with
any left or
5:58
right padding and border width values.
6:02
So, with all that being said,
6:04
what if we need these container divs to be
exactly the width and height we specified?
6:06
And we actually do in our case.
6:11
Well, we could do a bit of math and maybe
subtract the padding or
6:13
border widths from the total width or
height volume we defined.
6:18
For instance, instead of 960 pixels, we
can set the width value here
6:23
to 860 pixels to compensate for that extra
100 pixels of padding.
6:28
Well, sure, this works just fine, but
imagine having to do this for
6:33
every element in our layout that has a
width, height, or padding and
6:38
border width defined, right?
6:41
Well, in the next video, we're gonna learn
a better solution for this.
6:43
You need to sign up for Treehouse in order to download course files.
Sign up