Why is the styling not working - html

Question

How do I get this form to get formatted like the css. I created the form class called database and then named the classes in the form database as well, but no changes took place. Does adding css to a form that uses js, make a difference in the way it is styled?
<style type="text/css">
.database-label{
width:150px !important;
}
.database-label-left{
width:150px !important;
}
.database-line{
padding-top:1px;
padding-bottom:1px;
}
.database-label-right{
width:150px !important;
}
.database-all{
width:690px;
background:transparent;
color:#555555 !important;
font-family:'Lucida Grande';
font-size:14px;
}
.database-radio-item label, .database-checkbox-item label, .database-grading-label, .database-header{
color:#555555;
}
.database-label-top
{
display:none !important;
}
.database-textbox
{
width: 500px !important;
height:40px !important;
}
.database-save-button
{
width: 500px !important;
height:40px !important;
position:relative !important;
left:-151px !important;
}
.database-all input,select {
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;
width: 140px;
}
.database-dropdown
{
width: 500px !important;
height:40px !important;
}
</style>
<form id="database" name="database" class="database">
<label>School</label>
<select id="schoolList" name="schoolList" onchange="schoolChange()">
<option value="null">Select a School</option>
</select>
<br />
<label>Edit/Add a New Merchant</label><br />
<span id="categoryNum">0</span>
<select id="merchantCategoryList" name="merchantCategoryList" onchange="merchantCategoryChange()">
<option value=null>New Category</option>
</select>
<span id="newCategory">
<input id="newCategoryName" type="text" placeholder="Enter the name of the New Category." size="45" />
</span>
<br />
<span id="merchantNum">0</span>
<select id="merchantList" name="merchantList" onchange="merchantChange()">
<option value="null">New Merchant</option>
</select>
<span id="newMerchant">
<input id="newMerchantName" type="text" placeholder="Enter the name of the New Merchant." size="45" />
</span>
<br />
<div id="merchantInfo">
<label>Phone Number:</label>
<input id="phone" type="text" placeholder="Phone Number" size="45" />
<br />
<label>Address:</label>
<input id="address" type="text" placeholder="Address" size="45" />
<br />
<label>City:</label>
<input id="city" type="text" placeholder="City" size="45" />
<br />
<label>State:</label>
<input id="state" type="text" placeholder="State" size="45" />
<br />
<label>Zip:</label>
<input id="zip" type="text" placeholder="Zip Code" size="45" />
<br />
<label>Hours:</label>
<input id="hours" type="text" placeholder="Hours" size="45" />
<br />
</div>
<input id="Save" type="button" value="Save" onclick="save();" />
</form>

Answer 1

You haven't assigned any classes to the elements, other than the form itself.
So you can target the elements within that form, by:
form.database label{}
etc.

Answer 2

By your form class name you have to write your css selection like this for styling element :
.database > label { /*for styling label }
.database > span{ /*for styling span}
.database > input{ /*for styling all input type}
.database > input[type="text"]{ /*for styling input with type text}
.database > input[type="button"]{ /*for styling input with type button}
Thats all from me. Good luck

Answer 3

Add classes to elements e.g. for save button use class=".database-save-button"
Else declare css classes like
#Save
{
width: 500px !important;
height:40px !important;
position:relative !important;
left:-151px !important;
}