HTML and CSS Reference
In-Depth Information
}
.box ul {
margin: 10px;
}
The client comes back and says, “That box is great, but can you add another
one with a little blurb about the website?”
<div class="box">
<h2>About the Site</h2>
<p>This is my blog where I talk about only the bestest
things in the whole wide world.</p>
</div>
In the previous example, a margin was given to the list to make it line up
with the heading above it. With the new code example, we need to give it
similar styling.
.box ul, .box p {
margin: 10px;
}
That'll do, assuming that the content never changes. However, the point of
this exercise is to recognize that websites can and do change. Therefore,
we have to be proactive and recognize that there are alternative elements
we might want to use.
For greater flexibility, let's use classes to define the di
"
erent parts of this
module:
.box .hd { } /* this is our box heading */
.box .bd { } /* this is our box body */
When applied to the HTML, it looks like this:
<div class="box">
<h2 class="hd">About the Site</h2>
