We gaan nu verder met onderstaand voorbeeld:

We gaan nu het bijschrift in het kader van het formulier verfraaien. De tag waar we nu een stijl aan moeten toekennen is de legend-tag. Deze zijn we al tegengekomen in het eerste deel van deze reeks. We voegen onderstaande code toe aan onze CSS: 

legend
{
color: #444;
border: 1px solid #000;
font-weight: bold;
background-color: #dedede;
padding: 2px 6px;
margin-bottom: 8px:
}

 We maken de tekst 'bold' en geven die een donkergrijze kleur. Verder krijgt het vlak een lichtgrijze achtergrondkleur en we spelen wat met de positionering. Het resultaat ziet er zo uit:

Je ziet dat alle inputvelden als het ware aan elkaar geplakt zitten. Dit lijkt vrij rommelig. Daarom voegen we nog wat extra 'white-space' tussen alle inputvelden van het formulier.

input
{
margin-bottom: 0.5em;
}

Deze code heeft betrekking op alle input-elementen, dus ook de knop. Het resultaat ziet er als volgt uit:

We geven het gehele formulier een achtergrondkleur. We breiden de style voor de fieldset uit met een background-color en krijgen dan het volgende: 

fieldset
{
width: 20em;
background-color: #ccff99;
}

 Hieronder zie je het resultaat:

 Het zal je wel opgevallen zijn dat de groene achtergrondkleur bovenaan het formulier buiten de rand valt. Dit is het geval in Internet Explorer. Echter in FireFox blijft de achtergrondkleur wel binnen de bovenrand van de fieldset. Om dit op te lossen voegen we wat extra code toe aan de 'fieldset' en 'legend' style. De gehele CSS ziet er dan als volgt uit:

<style>
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
.submit input
{
margin-left: 4.5em;
}
input
{
margin-bottom: 0.5em;
}
fieldset
{
width: 20em;
background-color: #ccff99;
position: relative;
padding-top:1.5em;
}
legend
{
color: #444;
border: 1px solid #000;
font-weight: bold;
background-color: #dedede;
padding: 2px 6px;
margin-bottom: 8px;
position:absolute;
top: -0.7em;
left: 0.5em;
}
</style>

 De code die we hebben toegevoegd om bovenstaand probleem op te lossen is: onder 'fieldset' de twee laatste regels en onder 'legend' de drie laatste regels. Het uiteindelijke resultaat in Internet Explorer ziet er dan zo uit:

 Voila, het formulier is af. Je kunt zelf nog andere toevoegingen doen zoals het verfraaien van de knop of de invulvelden. Probeer het maar eens. Succes!