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.
Click here to view code image
1. <h1 class="logo">
2. <a href="index.html">Styles <br> Conference</a>
3. </h1>
Click here to view code image
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.
Click here to view code image
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
Search WWH ::

Custom Search