You can use it to make selects less wide. Css is a way to re-use stuff and make editing stuff easier. Say I want to make a table with inputs and selects and I want them all to be 55 pixels wide so they line up nicely with stuff: <table>
<tr>
<td><input type="text" name="attr_input1" title="input1" style="width: 55px;"></td>
<td><input type="number" name="attr_input2" title="input2" style="width: 55px;"></td>
<td><select name="attr_select1" title="select1" style="width: 55px;">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
<td><select name="attr_select2" title="select2" style="width: 55px;">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
</tr>
<tr>
<td><input type="text" name="attr_input3" title="input3" style="width: 55px;"></td>
<td><input type="number" name="attr_input4" title="input4" style="width: 55px;"></td>
<td><select name="attr_select3" title="select3" style="width: 55px;">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
<td><select name="attr_select4" title="select4" style="width: 55px;">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
</tr>
</table> It works beautifully and I have a table that I like. I can keep adding rows and it will look like I want it to look. But then I realize that I really want the text input to be bigger, the number input only needs to take 2 values so it can be smaller and my selects are too narrow; you can't read everything. So I have to go back and edit all the numbers. Now if I set it up the same table with CSS classes instead, the HTML could look like: <table>
<tr>
<td><input type="text" name="attr_input1" title="input1" class="sheet-table-text1"></td>
<td><input type="number" name="attr_input2" title="input2" class="sheet-table-number1"></td>
<td><select name="attr_select1" title="select1" class="sheet-table-select1">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
<td><select name="attr_select2" title="select2" class="sheet-table-select1">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
</tr>
<tr>
<td><input type="text" name="attr_input3" title="input3" class="sheet-table-text1"></td>
<td><input type="number" name="attr_input4" title="input4" class="sheet-table-number1"></td>
<td><select name="attr_select3" title="select3" class="sheet-table-select1">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
<td><select name="attr_select4" title="select4" class="sheet-table-select1">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select></td>
</tr>
</table> and the CSS could look like: .sheet-table-text1 {
width: 55px;
}
.sheet-table-number1 {
width: 55px;
}
.sheet-table-select1 {
width: 55px;
} but if I wanted to change all the selects to be 75 px wide instead, the text inputs to be 125 px wide, and the numbers to be only 35 px wide, I could just edit the CSS file and change it to: .sheet-table-text1 {
width: 125px;
}
.sheet-table-number1 {
width: 35px;
}
.sheet-table-select1 {
width: 75px;
} and all the input widths in the table change for me. Magic! (and a lot less editing which means I hopefully miss fewer things) Oh, and if I now want to make the backgrounds for all the number inputs some color, I can just edit the CSS and they will all change for me also! I'll admit, I tend to start my coding using the style="" stuff and then when I notice I've done the same style multiple times, pull it out and turn it into a css class so my code ends up with a mix of things. But the css classes do make a lot of stuff easier to edit and change. :) Css isn't quite as bad/as intimidating as it looks to be. :) Even if like me, you learned html years and years ago. :D