Loading...

We've learned how lists and tables can be enhanced with CSS techniques.

Before you take your quiz, try out the activity below to practice using internal CSS to alter the appearance of lists and tables.

Set this list to have square labels.

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul>

Add more spacing between these list items.

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul>

Change the labels to a custom image, "dot.png".

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul>

Change the background color of Cell 5 and Cell 6.

<table>
<tr class="row1">
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr class="row2">
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr class="row3">
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Change the font color for Cell 1, Cell 3, and Cell 5.

<table>
<colgroup>
<col class="column1">
<col class="column2">
</colgroup>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Remove the spacing between the cells.

Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
Your Responses Sample Answers
<style>
ul {
list-style-type:square;
}
</style>
<style>
li {
margin-bottom:10px;
}
</style>
<style>
ul {
list-style-image:url("dot.png");
}
</style>
<style>
tr.row3 {
background-color:#DDDDDD;
}
</style>
<style>
.column1 {
color:#0000FF;
}
</style>
<style>
table {
border-collapse:collapse;
}
</style>