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
The display property is one of CSS's most important properties for controlling layout. With the display property, we can override the default display settings of an element. As your CSS skills get more advanced, you’ll learn that the CSS display property offers all sorts of advanced methods for creating layouts that respond to changes in the viewport, such as Flexbox and CSS Grid. However, we’ll introduce this concept by working with some of CSS’s simpler display values. In this video, we’ll cover four of them: none, block, inline and inline-block.
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
[MUSIC]
0:00
The display property is one of
CSS's most important properties for
0:04
controlling layout.
0:09
With the display property
we can override the default
0:12
display settings of an element.
0:17
As your CSS skills get more advanced,
you'll learn that the CSS display
0:19
property offers all sorts of advanced
methods for creating layouts
0:25
that respond to changes in the viewport,
such as Flexbox and CSS Grid.
0:30
However, we'll introduce this concept
by working with some of CSS's
0:37
simpler display values.
0:41
In this video, we'll cover four of them,
none, block, inline and inline-block.
0:44
Let's start with display none.
0:53
I'll create a class called .hide in
my CSS that uses this display value.
0:57
And now I'll apply that class
to one of developer Diane's
1:08
paragraphs from her blog post.
1:13
As you might have guessed,
1:20
this paragraph is now hidden when
we preview the page in the browser.
1:22
By definition, any element with
the display set to none will be
1:27
treated as though it doesn't exist.
1:31
So screen readers won't read
the text of this paragraph either.
1:34
You probably won't use display
none all that often just yet.
1:40
After all, if developer Diane
doesn't like this paragraph,
1:46
couldn't she just delete it from her HTML?
1:49
So I'm going to undo where I
applied this class to my HTML.
1:53
Where display none really shines is
responding to user interactions.
1:59
You've probably seen posts where
part of the article is hidden
2:05
until the user clicks a "read more" button.
2:09
Display none could be used to
hide part of Diane's article from
2:13
display until the user is
ready to read the whole thing.
2:17
So display none is pretty straightforward.
2:24
But what's the difference between block,
inline and inline-block?
2:27
You've actually been working with
elements that use these display
2:33
values by default for a while now.
2:38
Let's take a closer
look at what they mean.
2:41
Many of the HTML elements you've
been using to mark up text,
2:44
like headings, paragraphs and
unordered lists,
2:49
have a default display value set to block.
2:54
Block elements occupy 100% of the width
of the parent container by default and
2:57
are placed underneath each other,
not side by side.
3:04
The best known HTML element that
uses a display value of inline
3:10
by default Is the <a> element for
creating text links.
3:15
Inline elements will be on
the same line as other content.
3:20
And you actually can't change the width or
3:25
height of an inline element using CSS.
3:29
Inline-block is a bit of
a mixture of the two concepts.
3:33
Elements with the display
value set to inline-block will
3:38
be on the same line as other content,
but you can set the width and
3:42
height of inline-block elements using CSS.
3:47
I mentioned that <a> elements
are displayed inline by default.
3:53
What do you suppose would happen if
we changed them all to display block?
3:59
The value block overrides the link's
default display of inline.
4:08
We can see how our links are now
displayed as block elements.
4:13
Each link is on its own line with
a break before and after it.
4:19
In fact,
if we give them a background color,
4:25
we can really see how it
affects their layout.
4:29
Since our <a> elements
are now block elements,
4:36
they take up the full available width.
4:40
That is, of course, unless we
specify that they should be smaller.
4:43
When we preview that in the browser,
it works.
4:54
Our links are 400 pixels wide.
4:58
But if we get rid of
the display block declaration,
5:01
Our links are now restored
to the default inline value.
5:10
And notice that the width property
no longer has any impact.
5:15
We can't change the width of
elements set to display inline.
5:20
I'm going to delete this rule since
these aren't really great looking links.
5:26
So what would happen if we give
the block level <li> element
5:33
on the page a display property and
set the value to inline?
5:38
We know that inline elements stay in
line with the rest of the content.
5:52
So when we override the default
with the value inline,
5:57
my list items are all on a single line.
6:02
Let's try to style these items a bit
more like a horizontal navigation
6:07
by changing their width,
padding and background color.
6:11
Hm, that didn't
seem to work.
6:31
The yellow is there, but the padding and
width aren't affecting my boxes.
6:34
What went wrong?
6:39
Right, you can't do that
with inline elements.
6:42
Let's try using display inline-block.
6:45
Much better.
6:53
Inline-block elements are placed side
by side provided there's room within
6:55
your layout to do so.
6:59
But you can also control
the size of your CSS box in ways
7:01
you can't with inline elements.
7:05
There's lots more to learn about
working with the CSS display property,
7:10
as well as using CSS to
style responsive content.
7:15
I've included further readings in the
teacher's notes, as well as links to more
7:20
advanced Treehouse courses you'll want to
check out after you complete this one.
7:24
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