A Smarter Way To Learn HTML & CSS(2015)

Let’s add a logo to the header. We’ll place it to the left of the header text.

Here’s a start:

<div id="header">
<img src="images/logo_led_bulb.png" alt="logo" width="40" height="47"> <h2>A Smarter Way to Learn</h2>
</div>

That gives us this:

That’s not what we want. We’ll have to float the image.

div#header img {
float: left;
}

Here’s what the float accomplishes:

We’re getting close. We just need to add some space around the logo.

div#header img {
float: left;
margin: .9em .6em 0 .75em;
}

And there you have it.

Notice that the color block—the div—has expanded vertically to accommodate the top and bottom margins.

1. In your CSS file style the image inside the div so it floats left and has 1em of margin.

2. Give the heading inside the div some top-padding so it moves down to center vertically.

3. In your HTML file add an image inside the div: http://www.asmarterwaytolearn.com/loris_50.jpg

4. Save the file and display the page. (Don’t be surprised to see the header cover up some content. We’ll deal with this in Chapter 6)

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-66-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-66-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/66.html