Example 8: CSS used to left justify labels

<div class="text">
    <label for="name">Name</label>
    <input type="text" size="30" name="name" id="name"/>
</div>

<div class="text">
    <label for="email">E-mail</label>
    <input type="text" size="25" name="email" id="email"/>
</div>

<div class="text">
    <label for="comment">Comment</label>
    <textarea rows="5" cols="50" name="comment" id="comment"></textarea>
</div>

  <style type="text/css">

div.text {
  margin: 0;
  padding: 0;
  padding-bottom: 1.25em;
}

div.text label {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 100%;
  padding-top: .1em;
  padding-right: .25em;
  width: 6em;
  text-align: left;
  float: left;
}

div.text input,
div.text textarea {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 100%;
}

input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {
  background-color: lightyellow;
  border-color: yellow;
}  </style>