Styling The Form
There is a very important reason this tutorial far has been very (HTML) source code oriented. CSS applies style rules to tags. Without understanding the tags that make up a document it is impossible to effectively style it. CSS can be used to customize the default formatting of tags such as to change the default font-family, size, or color. These formatting changes don’t necessarily require an in depth knowledge of HTML. CSS is more than just making small changes to content format, it makes complete face lifts possible with just a few nips and tucks.
The form with paragraph tags separating form inputs, and the accessible form look different because they are made of different tags. This does not have to be the case. By applying some simple CSS, the accessible form can be made nearly identical to the original version:
Inside the style tag, in the head, add the following:
label{
display:block;
margin-top:1em; marign-bottom: 1em;
}
fieldset{
display:inline;
border:none;
margin-left:0;
padding-left:0;
}
fieldset legend{
padding-left:0; padding-top: 1em;
margin-left:0; margin-bottom: 0.65em;
}
fieldset label, fieldset input{display: inline;}
label.hidden{
display: block;
visibility:hidden;
margin-top: -2em;
}
label.hidden input{ visibility:visible; margin-left: -5em;}
This short style sheet formats the accessible form to almost exactly the same format at the original form.
How These Styles Work
The first style:
label{
display:block;
margin-top:1em; marign-bottom: 1em;
}
Sets a style rule that makes label tags act more like paragraph tags. The “display” property changes the label tag’s display style from “inline” to “block”. This effectively draws an invisible box around the label tag to separate itself from other inline tags. Inline tags tend to flow together horizontally and can’t have certain attributes, such as a height or width set. Blocks on the other hand tend to fall to new lines, stacking vertically. The “margin-top” and “margin-bottom” properties add a buffer zone to the top and bottom of the label tag’s block much the same way paragraphs have a line of buffer between them and other elements.
The next style:
fieldset{
display:inline;
border:none;
margin-left:0;
padding-left:0;
}
Changes the way the fieldset tag acts. In the original form there was no tag wrapping the question and choices, so to make the accessible form look as much like the original version as possible the extra tag needs to be amorphous, like an inline tag. By default, fieldsets have a border so this is removed. Margins at the top and bottom are preserved, but the padding and margins on the left are removed to eliminate the indenting effect that the fieldset has on the tags inside.
fieldset legend{
padding-left:0; padding-top: 1em;
margin-left:0; margin-bottom: 0.65em;
}
This rule set looks different because it does not apply to all tags of one type the way the first two did. CSS rules sets are made of two components, a selector that specifies what the rules apply to, and a rule list. The selector comes before the pair of curly brackets, and the rule list is contained inside. Each rule starts with a property followed by a colon, and then one or more values to set the property followed by a semi-colon.
The rule list above applies to only legend tags that appear inside fieldset tags. Because fieldset is now inline, the spacing that separates it from the elements above has to come from something inside at the top that is block formatted. Paddings and margins work differently. When setting margins fail, padding may give the desired effect. Legend tags are already block style, so that property does not need to be set. The left padding and margin are removed to eliminate the indenting typically applied to fieldset legends, and a margin on the bottom is added to space it from the form inputs below.
fieldset label, fieldset input{display: inline;}
label.hidden{
display: block;
visibility:hidden;
margin-top: -2em;
}
There are several shorthand notations in CSS. Selectors can be combined in a list by comma separating them. This works well when two tags need the same or similar rules. Above, labels and input tags that appear inside of a fieldset tag are set to the inline format.
The rule that follows uses another type of selector, classes. Setting the “class” attribute of a tag, allows it to be targeted by CSS without effecting other tags of the same type unless their class also matches. As an added bonus, rules that are more specific take precedence over more general rules, this is where the “cascading” part of the name “cascading style sheets” comes from. Rules can be written for general cases and overridden in more specific cases. This allows style sheets to be shared widely among many different pages, but add specialized rules for greater flexibility.
Keep in mind that it is not the “class=hidden” that makes the tag disappear, it is the style assigned to that class. The class is just a name and does not affect the style itself.
Label tags with the class “hidden” flow as a block, but are not visible. This means the tag takes up space, but cannot be seen. This may not be the best choice for making the label accessible, since depending on the browser implementation it may also be hidden from a screen reader. Alternatives to this method will be covered later. The last property, a negative top margin, is a trick to make the input tag appear to come up to the previous line. Remember that blocks go down one line. If this label was inline it would line up horizontally beside the preceding fieldset, which is also inline. This would cause the input box be in the right ertical position, but stick too far out.
label.hidden input{ visibility:visible; margin-left: -5em;}
The last rule set applies to to input tags that are inside labels with the “hidden” class. It makes them visible, overriding the hidden nature of the enclosing hidden label. Again a negative margin is used, this time to make up for the extra space taken up by the invisible label tag.
To make the styled accessible form look like the original, the class must be applied to the two label tags for “If other please specify”.
</fieldset>
<label> If other please specify
<input type="text" name="other icecream">
</label>
<fieldset>
...
</fieldset>
<label> If other please specify
<input type="text" name="other pet">
</label>
<label> State of Birth
...
The Value of Styles
This six rule set style sheet is relatively simple because it only applies to a few tags. At the same time, it is a little complex because it completely changes the nature of several tags. Style sheets are powerful but this exercise begs the question, “Was all that work worth the effort to make an accessible form look exactly like the original? ”
The answer is, “Probably”. There are several ways in which style sheets pull their own weight. Now that this style sheet has been written it can be used not only on this form, but on many others as well. The work of writing a style sheet is often justified when there is potential to re-use it for other applications. Style sheets are easy to share. To make the style sheet sharable:
- Cut and paste all the rule sets out of the style tag into a separate file.
- Name the file and give it the extension .css.
- In the style tag write the line “@import “yourfile.css”;
- Or outside of the style tag add a link tag :
<link rel="stylesheet" href="yourfile.css" />
Style sheets can govern an entire layout, cutting the amount of code used in the body of a document by half or more compared to table layouts. Style sheets can also do things that tables cannot. Shared style sheets compound this saving because the style sheet can be loaded once and cached. Table layouts clog the code of every page they are used on.
CSS can also degrade more gracefully. Without implementing a complex scripted templating system there is no way to create a table layout that looks sleek in the modern browser, clean in older browsers, and perfectly formatted for printout. Because CSS styles are not embedded in the markup of the document’s body, they are easy to swap out. Multiple versions of one style sheet can be applied automatically or at the user’s discretion to optimize the appearance of each page for each user.
The true value of CSS is control over the appearance of content, control over both consistency and change.