HTML and CSS Reference
In-Depth Information
3.
While we're at it, let's add a little more detail to our logo. We'll begin by placing a
<br>
element, or line break, between the word “Styles” and the word “Conferen-
ce” to force the text of our logo to sit on two lines.
Within the CSS, let's add a border to the top of our logo and some vertical
pad-
ding
to give the logo breathing room.
HTML
1.
<h1 class="logo">
2.
<a href="index.html">Styles
<br>
Conference</a>
3.
</h1>
CSS
1.
.logo {
2.
border-top: 4px solid #648880;
3.
padding: 40px 0 22px 0;
4.
float: left;
5.
}
4.
Because we floated the
<h1>
element, we'll want to contain that
float
. The
closest parent element of the
<h1>
element is the
<header>
element, so we'll
want to add the class of
group
to the
<header>
element. Doing this applies the
clearfix styles we set up earlier to the
<header>
element.
1.
<header class="container
group
">
2.
...
3.
</header>
5.
The
<header>
element is taking shape, so let's take a look at the
<footer>
element. Much like we did with the
<header>
element, we'll float our copyright
to the left within the
<small>
element and let all other elements wrap around it
to the right.
Unlike the
<header>
element, though, we're not going to use a class directly on
the floated element. This time we're going to apply a class to the parent of the
floated element and use a unique CSS selector to select the element and then float
it.
Search WWH ::
Custom Search