Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to HTML and CSS!
You have completed Introduction to HTML and CSS!
Preview
Uncover the fundamentals of display properties in CSS, learning how they affect element placement and sizing. Understand the key concepts of block-level, inline, and inline-block elements.
Resources
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
I'm sure you've noticed by now that this
image's position doesn't quite match
0:00
the mark up.
0:04
You might have even tried to center
it on your own using margin-auto, but
0:05
it hasn't worked.
0:10
In this video,
we'll unravel the secrets of layout and
0:11
positioning in CSS with
the display property.
0:15
The display property specifies how
an element is displayed on the web page.
0:18
Let's dive into some of the key
display property values.
0:23
Block, block elements always
start on a new line and
0:27
take up the full width
available in its container.
0:31
We've met a few elements that have
a default display value of block,
0:35
body, div, and paragraph.
0:40
In fact, most of what we've learned so
far has a default display of block.
0:42
Inline, inline level element
take up only as much width as
0:48
the elements content and border.
0:52
In fact, top and bottom margins and
paddings do not affect inline elements.
0:55
We've already come across some examples
that have a default display of inline,
1:00
anchor tags, and images.
1:06
Both only take up the width of the link or
image.
1:08
This is why anchor tags appear
on the same line as other texts.
1:11
This is also why using margin: 0
auto wouldn't work on the image.
1:16
But this is where our next display
property value comes in handy.
1:21
Inline-block, as the name suggests,
combines the best of both worlds.
1:26
It allows you to create elements
that don't start on a new line but
1:30
can still be styled with margins,
padding, and dimensions.
1:34
This is particularly handy when you want
to create custom styled elements that
1:38
fit seamlessly into your content flow.
1:43
So if we want to center our recipe
image using margin: 0 auto,
1:46
we'll first need to set the image's
display property value to block.
1:50
Find the #intro img CSS rule block and
1:55
add our new display declaration to it,
1:59
followed by the margin auto trick.
2:04
Save the file and refresh the page.
2:07
We can see that our image
is now center aligned.
2:12
Next, let's tackle the anchor tags.
2:15
As we learned earlier, anchor tags have
a default display value of inline,
2:18
so they only take up as much
width as their content.
2:24
This works super well for this link here,
2:27
because the sentence flows seamlessly from
the paragraph tag into the anchor tag.
2:30
We'll have to apply some styling for
this back to top button.
2:36
We want it to be aligned to the far
right of this main container, but
2:40
right now,
it only takes up the width of the text.
2:44
To make this happen, we can change its
display property value to block and
2:48
then align the text to the right.
2:52
But how should we select
just this anchor using CSS?
2:55
We can certainly try to
select an anchor tag in main,
3:00
but there are two anchor tags in main.
3:04
This is a great time to add
an ID to this anchor element so
3:06
that we can select it using CSS.
3:11
Hop on over to carbonara.html,
scroll to the bottom of the page and
3:13
add an ID attribute to
the back to top anchor.
3:19
Let's call it back-to-top.
3:23
Don't forget to save the file.
3:27
Now, back in styles.css, at the bottom
of the file we can use the ID selector,
3:29
#back-to-top, to create a CSS rule block
and add our new declaration lines.
3:36
A display of block, and we'll move the
text to the right with text-align right.
3:42
Save the file and refresh the page.
3:50
We can see that the text is now
aligned to the right of the container.
3:54
Finally, we'll tackle this Nack
to list anchor tag at the top.
3:58
If we head over to the mark up,
4:03
we can see that this link should
have a brown background and
4:05
rounded corners with some padding between
the text and the edges of the background.
4:09
But we also know that margin and padding
properties don't apply to inline elements.
4:15
So perhaps we should make
this a block level element.
4:21
Let's give it a try and
add some of our styles.
4:25
Let's add some spacing and
select the anchor tag
4:28
that's nested within the nav
tag using nav space a.
4:32
We'll set its display to block,
give it some padding of 20 pixels.
4:37
Now, we can change the background color
to the dark brown we saw in the mark up.
4:44
In colors.text I'll copy the hex color and
paste it for
4:49
the value of background color.
4:54
To give it the rounded corners,
we'll set the border radius to 5 pixels.
4:57
Now, all that's left
is to adjust the font.
5:03
We'll give it a font color of white and
set the font weight to 800.
5:06
Save and refresh the page.
5:13
It looks like we may
have a bit of a problem,
5:17
because a block element takes up
the entire width of the container.
5:20
We can remedy this by using display
inline block rather than display block.
5:24
Let's change this.
5:30
Back in styles.css, I'll add inline-
5:31
to the front of block, save and refresh.
5:36
We can see that the anchor tag has
the padding properties we specified and
5:41
only takes up enough width for
the content and padding assigned.
5:46
Great work, with this knowledge,
you have the tools to create sophisticated
5:50
layouts and control how elements
are positioned in your web design.
5:55
As you can see, we're quite close
to replicating the mark up,
6:00
just one thing left.
6:03
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