Div blocks – Web design tutorial

Articles

Div blocks – Web design tutorial


To a certain extent, a div block can be whatever
you want it to be. But the most common use for a div block is
as a way to group other elements together. So if we go to this section, we can see that
the content (this heading, this paragraph, and this button) — the content is inside
a container, which is inside the section. Pretty normal setup. But we also know that this isn’t the most
legible thing in the world, and we want something to keep all these elements — the heading,
the paragraph, and the button — we want to wrap these things with something that can
control this content. So let’s add a div block. And we’ll place this right in the container. And we can transfer, we can simply bring in
our heading and our paragraph, and our button — right into this div block. Now the div block has been sized by the content
we just put inside. We haven’t told the div block to do anything. So to start, let’s select our div block
and set a width: let’s say 50%. And instantly you can see that everything
is now nicely guided by our div block. Everything’s held together. If we center our div block, everything inside
follows. We put it back? Everything follows it back. That div block, as we can see in the Navigator,
is the parent element of the three elements we’ve put inside. And wherever the div block goes, those elements
follow. And even though div blocks don’t need to
have any visible styles, we can do that, too. We can go down and add a background color,
maybe a white color, and adjust the opacity of that color so there’s a bit of transparency
and we can actually see our content, and we can go crazy here. We go over and add a drop shadow, adjust the
distance of the drop shadow… and the blur, and adjust our opacity. We can even go back up and add some padding
since that content is really pushing up against the edge (it might need some breathing room). And we can click and drag, and we can hold
shift to adjust the padding on all four sides at the same time. We can also put div blocks inside of other
div blocks. We’ll add a div block here in between the
heading and the paragraph to create a horizontal bar or divider. And we can add a name for this one, we can
creatively name it “horizontal divider.” Let’s tell our div block to have a width
of 100 pixels and a height of 2 pixels. And it’s pressed up against our paragraph
here, so we can add some margin. We can just click and drag to add some margin
— and then give this a color. Let’s do white, and we can drop the opacity
until it looks perfect. And just like that, we can tell a div block
exactly how to behave. Div block, behave. [Siri: “I’m not sure I understand.”] Another organizational benefit to a div block
is that — just like sections or containers — copying and pasting brings everything
inside with it. You don’t have to rebuild from scratch every
time. Let’s name the class for this div block,
we’ll double-click on the class to rename, and we’ll name our div block so it’s more
efficient to manage: Incredible Div Block. And with our div block selected, we can copy
and paste. And we’ve now duplicated our content. They’re a little close, so let’s add some
margin on the bottom. And since both div blocks have the same class
applied to them? Style changes to one will apply to the other. That works throughout this page — the page
we’re on — and throughout the entire project (any time we use this class). Finally, you can use div blocks as blank space
(give a block a set height or width to push other content around) but that can get really
messy and hard to track over time. The general rule there is simple. If instead you can add margin to accomplish
the same thing, for instance if you can adjust margin on the element above to push down rather
than creating a div block as a spacer, go that route. If you can’t do it with margin, go with
a div block. So, div blocks are incredibly versatile. They can hold and organize content, or they
can serve really simple purposes like horizontal dividers. Or they can be completely invisible. Those are some of the things we can do with
div blocks inside our projects.

Leave a Reply

Your email address will not be published. Required fields are marked *