Up next in 10
CSS Tutorial For Beginners 41 - Block-level Elements
3K views
Feb 8, 2024
The video titled "CSS Tutorial For Beginners 41 - Block-level Elements" is likely a part of a tutorial series aimed at individuals who are new to Cascading Style Sheets (CSS) and want to learn how to style web pages. In this specific video, the focus is on block-level elements in HTML and how to manipulate their appearance using CSS. Block-level elements are those that typically start on a new line and occupy the full width available to them. Examples include `<div>`, `<p>`, `<h1>` to `<h6>`, `<ul>`, and `<li>` tags. In the tutorial, viewers may expect to learn how to apply CSS properties such as width, height, margin, padding, border, and background to these elements. The tutorial may cover concepts like the box model, which explains how these properties affect the sizing and spacing of block-level elements. Additionally, viewers may learn about the display property and how it can be used to change the default behavior of block-level elements. Overall, this video serves as a fundamental guide for beginners looking to understand and effectively style block-level elements using CSS, thus enhancing their ability to design visually appealing and well-structured web pages.
View Video Transcript
0:00
Yo guys, what the hell is going on? You're watching CSS for Beginners lesson 41, and
0:11
in this lesson we're going to talk about block level elements. That's coming up
0:15
Okay, so first of all, just to recap what the box model is. Essentially, the box model
0:20
controls the spatial properties of all block level elements, and those spatial properties
0:26
are margin, this blue bar here, the padding, the green, the width, the yellow, and the
0:33
height, the yellow, as well as this border here. So those five properties, margin, padding
0:38
border, width, and height, they're the properties that the box model governs, and it applies
0:43
to all block level elements. And I've not really described or explained what block level
0:48
elements are, so I thought in this lesson, that's what we'd go through
0:53
Alright ninjas, so I'm back here in the code, and I've just added some new tags here. I've
0:58
got a couple of divs, in fact we'll do three, I'll just copy and paste that once more. And
1:04
those divs are given a class of block. And then I've got three span tags as well, and
1:10
those are all given a class of inline. Okay, so we've got the block styling here for all
1:15
the block classes, we're giving them a margin of 10 pixels and a padding of 10 pixels, as
1:20
well as a one pixel border, which is black. Exactly the same styles for the inline classes
1:25
which are these span tags here. So this is already saved, but let's just save it again
1:31
to make sure, and then just have a look at what this looks like in a browser. Okay, so
1:39
these three here are the div tags, and they are block level elements. Okay, so a div tag
1:45
is a block level element. And you can see that these block level elements, they occupy
1:50
the whole width of a row, one on top of another, a bit like building blocks. Okay, and that's
1:58
how block level elements work. They take up a whole row, a whole block in the document
2:04
So there's many different types of block level elements, div tags are just one of them. I've
2:09
got open a list here of all the block level elements, there may be some that have been
2:14
omitted from this list, but if you do a quick Google search, you can find them all. I'll
2:17
also provide this link in the video description down below. So we can see here, the div tag
2:24
is right there, all the block level elements, the p tag, all the heading tags, list tags
2:29
pre, address, block quote, div, etc, etc. Okay, there's quite a lot of them. So that
2:36
is what the block level elements look like. And if we right click and inspect one of these
2:43
we can see the orange is the margin that's being applied, the green is the padding, and
2:49
we've not applied a width and a height, but we can do, here down in the dev tools, we
2:54
can say width 400 pixels, height 200 pixels. And now we can see that these blocks here
3:03
have been given those width and height properties. So they are block level elements, and that
3:10
is what the box model governs. They can govern the spatial properties of block level elements
3:16
I'm just going to refresh this page to get rid of those changes, and it reverts back
3:21
to this. And then we're going to take a look at inline elements. These are inline elements
3:24
and if you remember from the code, they are span tags. So span tags are an inline element
3:30
We've given exactly the same properties to those, a margin of 10 pixels, a padding of
3:34
10 pixels, and a border. And at first glance, you can look at those and think, well, hang
3:39
on, yeah, they're given a margin, a border, and a padding inside the box. So yeah, they're
3:45
obeying the box model rules as well. Now, yeah, at first glance, it looks that way
3:52
but if we look under the hood, the first thing we'll see is that they don't occupy a full
3:58
row. They stack next to each other inline, hence why they're called inline elements
4:03
Because of this, they don't display any vertical spatial awareness. So yeah, they might get
4:10
this padding, and yeah, they might get the margin. If we inspect this, we can see the
4:14
padding in green is 10 pixels all around the element. The margin is only being applied
4:20
if you look at the element, to the left and the right, not to the top and the bottom
4:24
and that's because they cannot be controlled via the box model properties vertically. They
4:32
take up a space inline, not vertically. So horizontally, but not vertically. And to demonstrate
4:39
this point, I just want to go back to the code, and I'll add a few more span tags. Just
4:48
copy all those and paste them in a few times. I'll save it, and we'll go back to the browser
4:55
and look at that now. They're all kind of mushed up on top of each other. So the display
5:03
inline, going across, going across until the end. This one's cut off halfway, and it carries
5:08
on down here below, and then they go inline, inline again. But this here, this vertical
5:13
space, this margin is not applying to them. If we inspect the element, you can see the
5:19
vertical margins, nowhere to be seen. The padding that we applied is kind of overlapping
5:24
onto the line above, so it's not obeying those box model properties as we would like
5:29
them to. So how do we get around this? Well, we could change their display type. So we'll
5:37
go back to the code, and the way we change a display type is by giving it a display property
5:44
So it's just display, and then we can change it into a block level element by supplying
5:52
the value of block. So if we save this again, and view it in a browser, let's open with
6:00
Chrome, and now they're displaying exactly the same as those div tags above. They're
6:05
all block level elements now, because we've specified that specifically. But, I mean, they're
6:11
no longer stacking from left to right. And say we want that. Say we want them to stack
6:15
from left to right, but we also want them to have those box model properties, the margin
6:20
and the padding, so they don't mush up onto each other. Well, we can do that as well
6:24
And we'll minimize this and go back here. And the way we do it is by giving them inline
6:29
properties as well as block level properties. And we do this by specifying a value of inline-block
6:39
So that there, my friends, is saying, okay, the display type for this is inline-block
6:42
Give me all the inline positive attributes that inline elements have, and all the positive
6:48
attributes that block level elements have, and merge them together. And let's see what
6:53
this does for us. All right, cool. There we go. So now they have all the inline properties
7:03
of stacking left to right like this, but they also obey those margin and padding properties
7:10
that block level elements do also. So that's great. And this is a really good way we can
7:18
control things like navigations, user navigations. I'll show you what I mean. Let's jump back
7:24
to the code. And I'm going to delete all this here. And what I'm going to do is just add
7:30
in some A links. We won't give them any particular link for now. We'll just do anything. And
7:35
we'll just call it link like that. And A, oops. And then we'll copy and paste this a
7:42
few times. Oops. So say we give all the A tags, we want to style them like buttons
7:54
like a navigation. So we'll give them all a padding of 10 pixels. We want a margin of
7:59
10 pixels because we don't want them right next to each other. We'll have a background
8:03
color of, I don't know, we'll just say a gray color. You don't need to do anything else
8:12
you don't need to understand these hex codes. I'll go through that later. And we'll give
8:17
them a border, 1 pixel solid, and a slightly darker gray like that. And we'll give them
8:26
a text color of black. And we'll take away the underlying by specifying a text decoration
8:34
of none. And we'll save that. So first of all, an A tag is an inline element. So by
8:46
default it's not going to show those block level properties. It's not going to obey those
8:51
padding and margin properties. So let's just see what this looks like in a browser. In
8:55
fact, let's just, to demonstrate this inline thing first of all, we'll just double the
9:02
links. And we'll right click, open in a browser. Okay, they look fine there. And this is the
9:11
reason I tried to add a lot of links. So let's just double this again. Like that. And view
9:22
once more. So when they have the display type of inline, which is by default, they look
9:29
like this, which is pretty cack. Yeah. But we can change this to inline block display
9:37
inline block. And it should now look fine. Perfect. And I know you're not going to have
9:49
this many links in your navigation, your top level navigation most of the time. That looks
9:54
a bit silly. But I mean, when you start working with other content underneath the links, it's
9:59
going to be greatly beneficial to you to use something like this. Okay. And the good
10:02
thing about display inline block is that these days it's widely supported by browsers. In
10:08
days gone by, we used to have to kind of fudge this a little bit so that it was supported
10:13
in different browsers. But now, if we take a look at this website, this is caniuse.com
10:20
great website to kind of see whether you can use certain CSS properties within modern browsers
10:26
and how far they go back to old browsers. Anyway, I'll talk more about kind of browser
10:30
support in later videos. But for now, I just want to show you that you can see here that
10:34
IE, Firefox, Chrome, Safari, all these different browsers, green, it means it's supported
10:39
So that's brilliant. So yeah, go away, practice with these, have fun. If you have any questions
10:44
whatsoever, feel free to throw a comment down below. Otherwise, please subscribe, share
10:48
or like these videos. And I'll see you guys in the next one