Adding Style

Before we go too much further, it's probably quite important for the more artistic amongst you to learn how to style our controls. The good news is that since XForms uses XML mark-up, then you can use everything you have learned about styling HTML documents.

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:

Screenshot of a form with styled controls

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.

Anatomy of a Control

Your first thought when looking at the previous rules may have been that setting the width of an input to 100% ought to have made just the data entry area take up an entire line, on a separate line from the label. This is a common assumption for people used to using HTML, and the reason is that the HTML input control is only a data entry area, with any labels that might apply to it being separate and taking up their own space. This means that there is no way to style the label for a specific control.

In XForms things are different. The control encloses its own label and the data entry area, like this:

Diagram showing the various parts of a control

Each of these parts can be styled independently, and since they have a common parent they can also be styled in relation to each other. For example, if we want the data entry area of all input controls to have a light green background, we would use this rule:

  .input-value,
  {
    background-color : lightgreen;
  }

The resulting form would look something like this:

Screenshot of input controls with light green backgrounds for the data entry part

Experiment

Try altering the values of the three parts of a control--the container, the label and the value--and see what happens. For example, see if you can make all labels bold, and place the label and data entry parts of controls on separate lines.