jQuery for Designers Beginner's Guide

Time for action – styling the styleable

1. Open up your styles.css file. We'll start off by styling the fieldsets and legends:

   fieldset  {
     background: #fff;
     border: 1px dotted #83b0ca;
     margin: 10px 20px 0 20px;
     padding:10px;
     }
   
   legend  {
     background: #bed6e3;
     border:1px solid #8fb7cf;
     color: #1C4257;
     padding: 0 5px;
     box-shadow:2px 2px 2px rgba(0,0,0,0.2);
     }

   I've selected shades of blue that match the Aristo theme that I selected. If you chose a different theme, feel free to use different colors and styles to match your chosen theme.

2. Next, we'll style some of the container elements we're using in the form:

   fieldset p { margin: 0 0 10px 0; } fieldset ul { list-style: none; margin: 0; padding: 0; } label { display: block; } ul label { display: inline; width: ...