Use the links below to re-style this entire web site to see how you can change the looks of a website with CSS while leaving the content in tact.
<h1>Forms</h1>
<h2>This is a web page that has a completely accessible web form</h2>
<form name="ThisFormOfCourse" action="forms.php" METHOD="post" ENCTYPE="application/x-www-form-urlencoded">
<br><label for="a_text_field_01" title="This is a text field 01">Text field 01</label>
<br><input type="text" name="a_text_field_01" id="a_text_field_01" value="" title="Enter text for a text field 01" placeholder="Prefilled Sample Text 01">
<br><label for="a_text_field_02" title="Enter some text for a text field 02">Text field 02</label>
<br><input type="text" name="a_text_field_02" id="a_text_field_02" value="" title="Enter text for a text field 02" placeholder="Prefilled Sample Text 02">
<br><label for="a_text_field_for_whole_numbers" title="Enter a whole number for a text field for whole numbers">Text field for whole numbers</label>
<br><input type="number" name="a_text_field_for_whole_numbers" id="a_text_field_for_whole_numbers" value="" title="Enter a number for a text field for whole numbers" style="width:22em;" maxlength="3" min="1" step="1" max="250" placeholder="Enter whole numbers only from 1 to 250">
<br><label for="a_text_field_for_currency_numbers" title="Enter a decimal number for a text field for currency numbers">Text field for currency numbers</label>
<br><input type="number" name="a_text_field_for_currency_numbers" id="a_text_field_for_currency_numbers" value="" title="Enter a decimal point number for a text field for currency numbers" style="width:22em;" maxlength="5" min="0.01" step="0.01" max="100" placeholder="Enter whole numbers only from 1 to 100.00">
<div style="display:block;padding-top:2em;">
<fieldset>
<legend>Radio Buttons</legend>
<br><input type="radio" name="gender" id="1st_choice" value="1st_choice" title="Set to 1st choice"><label for="1st_choice" class="radio" title="Set the Radio Buttons item to 1st choice">1st choice</label>
<br><input type="radio" name="gender" id="2nd_choice" value="2nd_choice" title="Set to 2nd choice"><label for="2nd_choice" class="radio" title="Set the Radio Buttons item to 2nd choice">2nd choice</label>
<br><input type="radio" name="gender" id="3rd_choice" value="3rd_choice" title="Set to 3rd choice"><label for="3rd_choice" class="radio" title="Set the Radio Buttons item to 3rd choice">3rd choice</label>
</fieldset>
</div>
<div style="display:block;padding-top:2em;">
<fieldset>
<legend>Checkboxes</legend>
<br><input type="checkbox" name="1st_one" id="1st_one" value="1st_one" title="Set to 1st one"><label for="1st_one" class="checkbox" title="Set Checkboxes to 1st one">1st one</label>
<br><input type="checkbox" name="2nd_one" id="2nd_one" value="2nd_one" title="Set to 2nd one"><label for="2nd_one" class="checkbox" title="Set Checkboxes to 2nd one">2nd one</label>
<br><input type="checkbox" name="3rd_one" id="3rd_one" value="3rd_one" title="Set to 3rd one"><label for="3rd_one" class="checkbox" title="Set Checkboxes to 3rd one">3rd one</label>
<br><input type="checkbox" name="4th_one" id="4th_one" value="4th_one" title="Set to 4th one"><label for="4th_one" class="checkbox" title="Set Checkboxes to 4th one">4th one</label>
</fieldset>
</div>
<div style="display:block;padding-top:2em;">
<label for="a_dropdown_list" title="Select an option from a dropdown list">Dropdown list</label>
<select name="a_dropdown_list" id="a_dropdown_list" title="Select one of these options for a dropdown list">
<optgroup label="Grouping 1" title="Working on Grouping 1">
<option value="Option_1" title="Selecting Option 1">Option 1</option>
</optgroup>
<option value="Option_2" title="Selecting Option 2">Option 2</option>
<optgroup label="Grouping 2" title="Working on Grouping 2">
<option value="Option_3" title="Selecting Option 3">Option 3</option>
<option value="Option_4" title="Selecting Option 4">Option 4</option>
<option value="Option_5" title="Selecting Option 5">Option 5</option>
<option value="Option_6" title="Selecting Option 6">Option 6</option>
</optgroup>
<optgroup label="Grouping 3" title="Working on Grouping 3">
<option value="Option_7" title="Selecting Option 7">Option 7</option>
<option value="Option_8" title="Selecting Option 8">Option 8</option>
<option value="Option_9" title="Selecting Option 9">Option 9</option>
<option value="Option_10" title="Selecting Option 10">Option 10</option>
</optgroup>
</select>
</div>
<div style="display:block;padding-top:2em;">
<p><label for="a_textarea" title="Enter in text into a textarea">Textarea
<br><textarea name="a_textarea" id="a_textarea" rows="5" cols="55" title="Enter text for a textarea" placeholder="Prefilled Sample Text Area Text"></textarea></label></p>
</div>
<div style="display:block;padding-top:2em;">
<input type="submit" value="Submit" title="Save your changes here if this form was really live, but it's not">
</div>
</form>