Lesson Fourteen: Some Design
- Now you can use your CSS file to improve the design of your page. Enter this CSS code to your table container id; to get some room for your pictures, and to center the table container:
#tablecontainer1 { border-spacing: 40px; margin-left: auto; margin-right: auto; }
Your page should look like this:
- Add this code to your table cell class for padding and color around your table cells (you can also remove the table cell border:)
.tablecell { display: table-cell; vertical-align: top;
padding: 5px; background-color: lightgreen; }
Your page should look like this:
- Add this code to your table container id to add some background color:
#tablecontainer { background-color: darkgreen; }
Your page should look like this:
- Add this html code under the title h1 element:
<h2>Animals of Africa</h2>
- Add this CSS code in your CSS file:
h2 { font-size: 200%; text-align: center; color: darkgreen; }
Remove this border code from the tablecell class:
border: solid darkblue 2px;
Your page should look like this:
- Add this html code under your last div tag:
<h2>Click on an Animal Picture to learn more about the Creature</h2>
Your page should look like this:
Lesson Fifteen: Adding links