Lesson Eight: Introducing ids and classes

Take a quick look at your current mission statement page, and notice the difference between the text in the Our Mission section and the text in the Our Logo section (the width of the text in the Our Logo section is much shorter). Sample

Back in lesson three you added <br > (line break) tags to shorten the length of the text in the Our Logo section. You can accomplish the same thing by making the div elements' width shorter. Change the width of your divs with this code:
```
div { border: solid 2px darkblue; margin: 20px; padding: 20px; font-family: verdana, helvetica, arial, sans-serif; line-height: 1.8em; color: darkblue; width: 500px; }
```
Save and test your file to be sure that the code worked. Sample
You've probably noticed that these divs are a little restricted, in that they all behave in accordance with the div code in your CSS file. For example, all of the sections are now the same width of 500px. All the divs are exactly alike. However, you want to really emphasize the content of the actual mission statement. For this occasion you can add an id to the mission statement div. First define the design of the id in the mission.css file with the # symbol:
```
#missiondesign { width: 700px; }
```
Then in your mission.html file (in the opening div of the mission section) call the id with this code:
```
<div id="missiondesign">
```
Save and test your file to be sure that the code worked - your mission section should be 700 pixels wide. Sample
Now that you've established a unique id (identity) for the mission section, you can go to work making a unique design for this section. Try this code to center the text:
```
#missiondesign { width: 700px; text-align: center; }
```
Save and test your file to be sure that the code worked. Sample
Use this code to add some background:
```
#missiondesign { width: 700px; text-align: center; background-color: #ffe4b5; }
```
Save and test your file to be sure that the code worked. Sample
Use this code to add a left margin which will center the mission statement:
```
#missiondesign { width: 700px; text-align: center; background-color: #ffe4b5; margin-left: 100px; }
```
Save and test your file to be sure that the code worked. Sample
An id is very unique and has the restriction of only being used for one element on a page; in the above case for one div element (the mission statement). You may, however, create as many different ids as you would like (as long as they have unique names and are only assigned to one element each.) Classes on the other hand, have more versatility in that they can be assigned to any number of elements. Your motto and logo sections are similar and can be grouped in a class that uses the same name. Add this class to your CSS file. and call the class from the motto and logo divs..
```
logomottodesign { background-color: #e0ffff; }
```
Call the class in the HTML file by adding this code to the divs of the motto and logo sections.
```
<div class="logomottodesign">
```
(this code goes in the opening div tags of the motto and logo elements)

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

Lesson Nine: Introducing Tables and Table Cells

Coding

Lesson Eight: Introducing ids and classes