Lesson Six: Designing the divs

Finally you are going to get a chance to use the div elements that you created in lesson three. Enter this code in your CSS file to illustrate the div containers.
```
div { border: solid 2px darkblue; }
```
Save and test your file to be sure that the code worked. Notice that there is now a border around each of your div elements. The divs were always containers nested within the body of your page, but the borders make the concept easier to visualize. Sample
The div borders are in contact with one another. To separate the divs add some margin with this code:
```
div { border: solid 2px darkblue; margin: 20px; }
```
Once again save and test your file to be sure that the code worked. Sample
The text in the divs is pressed against the border of the divs. Add some separation with padding:
```
div { border: solid 2px darkblue; margin: 20px;  padding: 20px; }
```
Once again save and test your file to be sure that the code worked. Sample
That font-family that you entered as a default in your body element (container) worked great for your title, but these fonts in the sans-serif family are easier to read. So add this code:
```
div { border: solid 2px darkblue; margin: 20px; padding: 20px; font-family: Verdana, Helvetica, Arial, sans-serif; }
```
Once again save and test your file to be sure that the code worked. Compare the T's in the Title with the T's in the divs (also compare the other letters): there are no serifs in the divs. Sample
Some additional distance between the lines will make it even easier to read the text. You put a default line-height of 1.6em in the body element. If you use 1.8em for your divs you will see even more separation between the lines of text. Enter this code:
```
div { border: solid 2px darkblue; margin: 20px; padding: 20px; font-family: Verdana, Helvetica, Arial, sans-serif;  line-height: 1.8em; }
```
Once again save and test your file to be sure that the code worked. Sample

A dark blue color will show up well against the lighter tan color that you established in your body code. Enter the following CSS code:

div { border: solid 2px darkblue; margin: 20px; padding: 20px; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.8em; color: darkBlue; }

Lesson Seven: More design and More about Containers and Elements

Coding

Lesson Six: Designing the divs