Hey, guys. 1
In this section we're going to be diving deeper into CSS for website layout. 2
Now, we did a little bit of this when we touched upon CSS positioning in the last section, but we're 3
going to look at some other aspects of layout and we're going to start with the CSS Display Property. 4
Previously we've seen that when we create a paragraph element, if we examine the full border of the 5
element with a tool like Pesticide, then you can see that it actually takes up the entire full width 6
of the web page. 7
If we didn't want this to be the case, for example, if we wanted any paragraphs which are short enough 8
to have the next line wrap up, then we would need to use a different element. 9
Another type of element is something called a "span", and normally you'll see the span element in the 10
middle of another element. 11
In this case, I've got a span open tag and then I've got the content of it, which is the word, "beautiful", 12
and then I've got the closing tag of the span. 13
And this span is in between the paragraph element here. 14
So we've got the "Hello," and then we've got the span and then we've got the "World," and then we've got the 15
end of the paragraph element. 16
So that's what the code for this line looks like. 17
And the unique thing about the span element that's really cool is that it's by default has a different 18
value for the display property. 19
There are three common types of display values that we're going to look at. 20
The span has that value set to something called "inline". 21
Here's an example where we've got two h2's and because they are set to be display: inline, then they 22
will literally display, inline with each other without needing the second one to go on to a new line. 23
By default, most elements have this display set to a value called "block", and a block is exactly what 24
it sounds like. 25
It's a full width block. 26
But as you can see here, we can change that value in order to change the layout of our element. 27
This is how we would set that CSS value. 28
We would have the property which is display, which actually has many, many different possible values. 29
But the three that we're going to examine today is block, inline, 30
and finally a mixture of the two, which is called inline-block. 31
Let's take a look at each of these in turn. 32
As I mentioned, when an element has display set to block, then it's going to take up the entire full 33
width. 34
Now, this means that if you have another element, then it's going to go below it and it's not going 35
to go onto the same line. 36
Now, however, if the display was inline, then it means that if we had one element here, for example, 37
a span element, and then we add another element, that's another span, then they're both going to 38
go into the same line until we can no longer fit any more onto the width of the web page, in which 39
case they would go to the next line. 40
Now, one of the important things to remember about elements which are inline in their display is you 41
can't actually set the size of these elements. 42
You can't set the width and the height. 43
The reason for this is because they will default to the size of their content. 44
If you only had the word hello, then it would only be as wide as it would need to allow that element 45
to display. 46
And if you had a much longer sentence then your inline element would stretch to fit that size. 47
Keeping in mind this, if we go on to the very last type that I want to talk about, which is the 48
inline-block, what's unique about this, which is a sort of halfway point between the inline and the block, 49
is the block element allows us to set the height and width, 50
and the inline aspect of the setting allows us to have elements that go on to the same line. 51
What that means is if we have two elements which are both inline block and we have one that's say, 52
200 by 200 and we have another that's maybe 20 by 100, 53
then in this case, what will happen is because they're both inline-block, then we can set their height 54
and width. 55
And because they are inline block, they can actually go on to the same horizontal line as long as there 56
is enough space on the width of the web page. 57
By changing this display property to block inline or inline block, we can actually determine the layout 58
of our website. 59
And the final one that I want to mention in the same breath is when you set the display property to 60
"none", then what that's going to do is it's going to make any element on the screen basically disappear. 61
And sometimes this is useful when you have a button that say, hides an element or when you check-off 62
an item in the to do list and you want it to disappear, 63
this might be the property that you'll need. 64
So the display property can change many, many different things. 65
And these are just some of the values that you're going to see set on the display property quite frequently. 66
In order to better understand this, I've created an example website for you at this address 67
appbrewery.github.io/css-display 68
And here I've got three elements a Block Paragraph, an Inline Paragraph and an Inline-Block Paragraph. 69
So they're all paragraph elements, but you can actually change the height and width of all of these 70
elements and see what happens to the blocks. 71
So, for example, we know that our block elements can change in height and width, but no matter how 72
much you change the width, it's not going to bring the next line up. 73
We know that our inline elements cannot be changed in terms of height and width because they fit to 74
the width and height of their content. 75
And we know that our inline-block element is the one that gives us the powers of both, essentially 76
allowing us to change the height and width, 77
but also if the width was large, then it might need to occupy its own line, 78
but if it's small enough, then it could fit on the same line as another inline element or an 79
inline-block element. 80
Have a play around with this on this website to better understand this concept of these three display 81
values. 82
And then once you're done, I've got an exercise for you to practice writing the code and setting the 83
CSS display property. 84
Go ahead and download the starting file for 8.0 CSS Display, extract it and open it inside CS Code 85
and then open up the index.html. 86
Here 87
I've got two TODOs for you. 88
There's two steps to this challenge. 89
The first challenge is by changing only the display property in the CSS, 90
so I've got a style tag here with all the CSS and this is what you're going to change. 91
If we take a look at the preview for the code as it is, you can see we've got three paragraph elements 92
on screen and at the beginning it looks pretty much the same as the example website we were playing 93
around with just now. 94
But the only difference is we have the width and height set to 200px on each of the squares. 95
What I want you to do is to change only the display property in the CSS code right here in the index.html. 96
And by doing that, I want you to create a web page where all three of these squares line up horizontally 97
in the same way as the goal image. 98
Remember, you're going to have to think about which type of display you're going to need in order to 99
get all three of these to show up in the same size and horizontally lined up. 100
So pause the video and give this a go now. 101
All right. 102
So the first thing we know is that when we have a display set to inline, it's not going to respect 103
the height and width. 104
First thing we have to change is this display value. 105
So I'm going to change it to an inline-block. 106
And notice how as soon as I've changed that it is now a 200 by 200 square. 107
The other thing you notice is that the two inline-blocks, so the green one and the blue one allow this 108
layout where they line up next to each other, 109
whereas this red box which is set to block does not, because it wants to occupy the full width of the 110
page. 111
So that is the one that we're going to have to change in order to achieve our desired goal. 112
So let's change this to an inline-block. 113
And notice 114
now, if I stretch my page so that there's enough width, then everything will actually line up onto 115
the same horizontal. 116
If you had a little bit more narrow then because it's an inline-block, it will move to the next page 117
so that it actually can show the full width of each element, but on a normal viewing screen, 118
so if you actually opened this in a website, then you should see them lining up perfectly horizontally. 119
The next part of this challenge is to change only the display property again, and we're going to make 120
all three of them line up vertically like this one. 121
Now this is cut off at the end, but you can imagine if you scroll, they're just three equal size squares 122
which are all lined up vertically. 123
And we do that by changing the display property. 124
Pause the video and see if you can make that happen. 125
All right. 126
So the thing that we know about the vertical layout is in order for them to not go on to the same line 127
horizontally, they can't have anything to do with inline. 128
In order to achieve that vertical layout. 129
We need to change everything to have a block display value, 130
because what this is telling our website is each of these elements wants all of the width to itself. 131
Don't let it share the width with any other element. 132
And by doing this we end up with this vertical stacking of our elements and we've achieved two dramatically 133
different layouts just by understanding the difference between display: block, display: inline, and 134
display: inline-block. 135
So how to play around with that if you fancy, 136
but otherwise head over to the next lesson where we're going to learn about another way of laying out 137
elements using the float property. For all of that and more, I'll see you there.