Using CSS

To show how CSS is used, we'll restyle our form so that each control is on its own line, with all the data entry areas lining up vertically. We'll also add a nice dotted line to separate each control. The result will be something like this:

The CSS rules for this are pretty simple, so I'll show them first and then explain what it all means. To update your form, place the following in the head element, after the title, and then refresh the browser:

<style type="text/css">
  html
  {
    font-family      : "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size        : x-small;
  }

  xf\:input,
  xf\:output
  {
    width            : 100%;
    padding-top      : 0.4em;
    padding-bottom   : 0.1em;
    border-bottom    : #d0c49d 1px dashed;
  }

  xf\:label
  {
    width            : 12em;
    vertical-align   : middle;
    margin-right     : 0.2em;
  }
</style>

The first part--the rules for the html element--will no doubt be familiar to you, and simply set a default font for our document.

The next set of CSS rules concern all input and output controls; to indicate that we want these rules to apply to the XForms input and output elements rather than elements with the same name from a different language (you never know!), we include the colon in the CSS selector. Note that since CSS uses the colon to specify pseudo-classes, we must escape it by placing a '\' in front:

  xf\:input,
  xf\:output
  {
    .
    .
    .

The first rule for input and output controls sets the width of the control to 100%, ensuring that each control takes up a whole line. Similarly the first rule for labels sets their width to 12em, which has the effect of lining up all the data entry areas.