O'Reilly logo

jQuery for Designers Beginner's Guide by Natalie MacLees

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required