Lesson Seven: More design and More about Containers and Elements

This dark blue color seems to add some excitement to your Webpage so go ahead and change your title (enclosed in the h1 tags) to dark blue:
```
h1 { font-size: 250%; color: darkblue; }
```
Save and test your file to be sure that the code worked. Sample
A little bit of left margin will center your title:
```
h1 { font-size: 250%; color: darkblue; margin-left: 60px; }
```
Save and test your file to be sure that the code worked. Sample

For consistency you can change the body border to dark blue:

body { color: maroon; background-color: tan; border: solid 2px darkblue; margin: 40px; padding: 20px; line-height: 1.6em; font-size: large; font-family: Georgia, "Times New Roman", Times, serif; }

Save and test your file to be sure that the code worked.

So far you have been exposed to two very important terms: element and container. Take a look at your current Mission Statement page: Sample

Your borders certainly illustrate that the divs are contained within the body element of your page. The body contains the div sections. Also, note that the you have an h2 element and a p element contained within each div. The divs contain the h2 and p elements. At this point no additional elements are contained within the h2 and p elements; so you can technically say that they are just elements, with the potential of becoming containers.

You will now add an element inside your h2 element. Follow these steps:

Put a border around the h2 element with this code:
```
h2 { border: solid 2px darkblue; }
```
Put this logo image into your images folder
Add this image code within the h2 element in the div that contains the Our Mission h2:
```
<h2>Our Mission <img src="images/m7logo.png" alt="Compass Logo"></h2>
```
Your mission statement page should now look like this: Sample

Lesson Eight: Introducing ids and classes

Coding

Lesson Seven: More design and More about Containers and Elements