Display Values9:07 with Guil Hernandez
With the display property, we can override the default display settings of an element. In this video, we'll cover the three most common types of display values.
The display property is one of CSS's most important properties for 0:00 controlling layout. 0:03 With the display property, 0:04 we can override the default display settings of an element. 0:06 Now, the most common types of display values are the keyword values none, 0:09 block, inline, and inline block. 0:14 So for example, if we go back to our styles heet and 0:17 if we give our wildlife div element a display property and set the display 0:21 value to none, when we save our style sheet and refresh the browser, 0:27 notice how the display of the wildlife div is now sort of turned off. 0:32 So it no longer takes up any space on the page, and 0:37 the rest of the page displays as if it wasn't even there. 0:40 So, let's go back to our style sheet and remove the display none declaration so 0:44 we're actually able to see our wildlife div in our design. 0:48 Now, the value block is the default display for 0:52 block-level elements like divs, paragraphs and all headings. 0:56 They each take up the full width available in their parent element. 1:00 Now, anchor elements by default are displayed inline. 1:04 In fact, they are one of the most common types of inline elements. 1:07 So, let's see what happens if we give our links a display property and 1:11 set the value to block. 1:16 So, let's go back to our style sheet, and we'll scroll up to the a:link rule. 1:17 So, right beneath the text decoration property, 1:24 let's add a display property and set the value to block. 1:27 So, the value block overrides the links default display of inline. 1:34 So we can see how all links on the page are now displayed as block elements. 1:40 Each link is on its own line with a line before it and a line after it. 1:44 In fact, if we give our links a background color, 1:50 we can really see how it affects their layout. 1:52 So let's go back to our a:link rule, and 1:55 right beneath the display declaration, let's add a background-color property, 1:57 and we'll set the color to our favorite color, tomato. 2:03 So, when we save our style sheet and refresh the page, 2:06 we can see that, again, now that they're block-level elements, 2:09 notice how they take up their full available width. 2:14 And we can really see that down here in the link below the wildlife container. 2:17 But if we go back and set them to their default inline display by 2:21 removing the display declaration, when we take a look at it again, you can see how 2:25 the links are back within the flow of the content, only taking up the width of their 2:30 content area, and without disrupting the flow of their containing element. 2:35 For example, here the containing paragraph element. 2:40 So, knowing what we now know about inline and block elements, what would happen if 2:43 we give the block-level h1 in our main header a display property and 2:48 set the value to inline? 2:53 Well, let's try it out. 2:55 Let's go back to our style sheet, 2:56 and in our h1 rule right underneath the line-height declaration, 2:58 let's add a display property and set the value to inline. 3:03 So, we know that inline elements stay inline with the rest of the content. 3:09 So, when we override its default display with the value inline, 3:13 when we take a look at it in the browser, notice how the h1 now wraps to 3:18 the same line the span element is on since a span is also an inline element. 3:23 Now we're gonna go back and remove the display value in our h1 rule. 3:30 But we can also see the same thing happen with list items since 3:34 they're also block-level elements by default. 3:38 So, let's go back to our style sheet, and we're gonna create a new 3:42 rule underneath the h3 rule, where we'll target all list items on the page. 3:46 So, here's our li selector, and 3:51 we're gonna give it a display property, and set the value to inline. 3:55 So when we save our style sheet, and go back to the preview, and 4:01 refresh, notice how the list items are now on one line, or inline with each other. 4:05 [BLANK_AUDIO] 4:10 So now if we wanted to give them a little separation, we could maybe add a left and 4:14 right padding and a border to do that. 4:19 So let's go back to our li rule and let's add a padding property, 4:21 and we're gonna set the value to 0 for the top and 4:27 bottom, and 12 pixels of padding for the left and right sides. 4:30 And right below that, let's define a right border by using the border-right property. 4:34 And the border style will be solid. 4:40 And let's make the width 1 pixel. 4:43 So now, let's save our style sheet and refresh our browser. 4:46 Notice how now it starts to look more like a navigation menu, right? 4:51 But let's keep in mind that top and 4:55 bottom margins will not have any effect on inline elements. 4:57 So for instance, if we go back to the li rule, so let's define our margin 5:01 value as 80 pixels for the top and bottom, and 0 for the left and right sides. 5:06 When we save our style sheet and take a look at it again, 5:12 we can see that nothing really happens. 5:15 We don't see those margins. 5:17 Now, in order to apply the margins and have them take effect, 5:18 we'll need to change the list items element display value to inline-block. 5:22 Now, the value inline-block generates a box that's like a block element, 5:27 but it's also flowed with its surroundings as if it were an inline element. 5:33 So we're sort of getting a combination of inline and block-level display modes. 5:37 So, when we change the display value to inline-block, and save our style sheet and 5:41 refresh the page, now we're able to see the 80 pixels of top and 5:47 bottom margins applied to each list item. 5:51 [BLANK_AUDIO] 5:54 And there's actually lots more we can do with the display property. 5:58 Now, if you wanna learn how to style and build a navigation or a complex layout 6:01 using these display values, make sure you watch our course on CSS layout techniques. 6:06 So next, we're going to delete this example li rule. 6:12 I will, in fact, leave it in the final project files as a comment for reference. 6:16 So, what we're gonna do next is style our two main callout links on our page, so 6:22 the Find out more link here and 6:27 the See the Wildlife link below the wildlife panel. 6:29 And we're gonna style these links using the padding, border, margin, and 6:33 display styles we just learned about. 6:37 So, first let's go ahead and remove that tomato background color from our link. 6:39 So let's go back to our CSS, and in our a:link rule, 6:43 we'll get rid of the background-color tomato declaration. 6:47 And let's go over to our HTML file. 6:51 And we're going to find those links and give them classes. 6:55 So first, let's scroll down to line 16, and let's give this anchor 6:58 element a class attribute, and we're going to give it the class name callout. 7:05 And now, I'm gonna go ahead and copy this class attribute, and 7:12 scroll down to line 25. 7:17 And we're going to paste that class attribute inside this anchor element. 7:18 Once again, it's going to have the class callout. 7:24 So now let's save our index.html file and go back to our style sheet. 7:27 And let's scroll down to this main style section here. 7:31 And right above the main footer rule, 7:36 let's target the callout class, and now let's add a few CSS properties. 7:39 So first, we're going to give it a font-size property, and 7:47 we're gonna set the font-size value to 1.25em. 7:52 And right beneath that, let's give it a bottom border, so 7:57 we're gonna type the border-bottom property, and 8:00 let's set the border width to 3 pixels and the border style to solid. 8:04 Let's also give it some padding. 8:10 So, let's write the padding property and let's make the top value 0. 8:11 The left and right padding values are going to be 9 pixels, and 8:17 the bottom padding value is going to be 3 pixels. 8:21 And finally, let's give it a top margin by writing the margin-top property. 8:25 And let's set the top-margin value to 20 pixels. 8:30 And remember, links are displayed inline by default, so we'll need to 8:33 set the display to inline-block so that we're able to see the top margin. 8:37 So, let's add a display property and set the value to inline-block. 8:42 All right, so let's take a look at our design. 8:49 Let's save our style sheet, and refresh the browser. 8:52 And there we have our nicely styled callout links. 8:56 [BLANK_AUDIO] 8:59
You need to sign up for Treehouse in order to download course files.Sign up