CSS Help with textarea

I'm having some trouble getting textareas to format correctly in my character sheet.  They're taking their height and width properties from the .largedialog class that seems to be built into roll20, when I want them to use the class from my CSS.  In the image above, the first textarea is the dimension I want for all of them--I've set it's height and width using the html inline style attribute.  I want the remaining textareas to be set to the same dimensions, but it's not working. Here's my relevant html: <div> <span class="inputlabel">Look</span> <textarea class="inputarea" name="attr_divinity-look" style="width: calc(100% - 5px); height: 108px"></textarea> </div> <div> <span class="inputlabel">Cult</span> <textarea class="inputarea" name="attr_divinity-cult"></textarea> </div> <div> <span class="inputlabel">Epithet:</span> <input class="inputbox" type="text" name="attr_epithet"> <textarea class="inputarea" name="attr_epithet-desc"></textarea> </div> and here's the relevant css: .inputarea textarea { width: calc(100% - 5px); height: 108px; } what am I doing wrong?

You've used the descendant syntax in your CSS rule. The .inputarea class and the textarea tag are referring to the same element, so you need: textarea.inputarea { width: calc(100% - 5px); height: 108px; } ".inputarea textarea" will try to select a <textarea> element that is a descendant of an element with class="inputarea" . So, the other solution would be to leave your rule exactly as you have it, but move the class="inputarea" to that parent <div> which currently has no class assigned - that would grab the textarea for you. edit - unrelated, but you may also want a resize: vertical in that rule, to stop the textarea moving horizontally. From the looks of your layout, that's not something you'd want.

What font are you using on the sheet, is that Caesar Dressing, or some kind of rune font?

Oosh said: You've used the descendant syntax in your CSS rule. The .inputarea class and the textarea tag are referring to the same element, so you need: textarea.inputarea { width: calc(100% - 5px); height: 108px; } ".inputarea textarea" will try to select a <textarea> element that is a descendant of an element with class="inputarea" . So, the other solution would be to leave your rule exactly as you have it, but move the class="inputarea" to that parent <div> which currently has no class assigned - that would grab the textarea for you. edit - unrelated, but you may also want a resize: vertical in that rule, to stop the textarea moving horizontally. From the looks of your layout, that's not something you'd want. Thank you!  That worked.  and I've implemented your suggestion about the resize as well. Andreas J. said: What font are you using on the sheet, is that Caesar Dressing, or some kind of rune font? Yes, that's Caesar Dressing.