Example 4: Labeling checkboxes using reference

<div class="label">Select pizza toppings</div>
<ul class="checkbox">
  <li><input type="checkbox" id="cb1" value="pepperoni"/><label for="cb1">Pepperoni</label></li>
  <li><input type="checkbox" id="cb2" value="sausage" /><label for="cb2">Sausage</label></li>
  <li><input type="checkbox" id="cb3" value="mushrooms"/><label for="cb3">Mushrooms</label></li>
  <li><input type="checkbox" id="cb4" value="onions"/><label for="cb4">Onions</label></li>
  <li><input type="checkbox" id="cb5" value="gpeppers"/><label for="cb5">Green Peppers</label></li>
  <li><input type="checkbox" id="cb6" value="xcheese"/><label for="cb6">Extra Cheese</label></li>
</ul>

  <style type="text/css">
div.label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  font-size: 100%;
  font-weight: bold;
}

ul.checkbox   {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  list-style: none;
}

ul.checkbox li input {
  margin-right: .25em;
}
  </style>