Creating classes is easier than you think, though can seem tedious at first. But you soon get over that feeling. At some point, you figured out how to include style commands, as in here <td><input type="text" style="width: 45px;" name="attr_Oratoria_Skill" Value="0" /></td> <td><input type="text" style="width: 45px;" name="attr_Oratoria_mod" Value='0'/></td> Whenever you repeat the same style command, classes are very handy. The first thing you need to do is come up with a name for the class. then you just replace the style with that, for instance: <td><input type="text" class="skill-width" name="attr_Oratoria_Skill" Value="0" /></td> <td><input type="text" class="skill-width" name="attr_Oratoria_mod" Value='0'/></td> Then you need to create a css declaration which contains the name and the style information, like this, in the CSS file. .skill-width { width: 45px; } This is exactly the same as the inline stye, just you normally place each style on a separate line, like .skill-width { width: 45px; color: red; } Now wherever the class is named in the html, that style will be applied. There are other advantages to using a class over an inline style, but that is the main one to think about: if you later decide you want to apply different styles, you just need to change the CSS declaration once, and it is applied everywhere in your HTML instantly. The main downside is you have to sometimes think about specificity - how specific the declaration is. Number inputs are especially fiddle abut this, and you might need to make the class declaration more specific, like this: .ui-dialog .charsheet .skill-width { width: 45px; color: red; } Sometimes changes aren't displayed until you make the code more specific (which means, including more references that actually apply: all character sheets have .ui-dialog .charsheet before their apparent code, so they are always safe to include and you usually don't need anything more).
