Styling HTML5 forms with CSS3
Our form is now fully functional across all browsers and whilst we've got some very basic styling, you and I both know, with CSS3 we can do so much better. Let's apply some of the techniques we've already learned and used to spice up our form a little. So far, the following are all the form specific styles we have:
#redemption {
width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup {
margin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both;
text-align: center;
}
#howYouRateThis,#yearOfCrime {
text-align: right;
}
#redemption legend {
font-style: italic;
color: #434242;
font-size: 0.8em;
margin-bottom: 20px;
float: left;
width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
}
#redemption label {
width: 40%;
float...