| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Reference</title> |
| <style> |
| table { border-spacing: 2px; } |
| td { border: 1px solid; } |
| td, div { width: 10px; height: 10px; } |
| div.opc { opacity: 0.99; } |
| div.green { background: green; } |
| div.up { margin-top: -10px; } |
| div.red { background: red; } |
| </style> |
| <body> |
| <p>Each of the following boxes should have a green or |
| very-nearly-green square inside of it:</p> |
| <table><tr> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="red"></div> |
| <div class="up opc green"></div> |
| </td> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="red"></div> |
| <div class="up opc green"></div> |
| </td> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="red"></div> |
| <div class="up opc green"></div> |
| </td> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="green"></div> |
| </td> |
| <td> |
| <div class="red"></div> |
| <div class="up opc green"></div> |
| </td> |
| <td> |
| <div class="red"></div> |
| <div class="up opc green"></div> |
| </td> |
| </tr></table> |
| </body> |