CSS is additive - every element of the same type, or every element before it in the hierarchy can influence it. The CSS applied to other buttons, or to the buttons container, and their containers, and so on can affect this. The text in your button might be influenced by table or td formatting too. The way you normally override existing CSS is by making your CSS more specific. This means adding extra descriptors to the style. You can safely add .charsheet to the start of any element, then add extra elements if needed. Your button is included in a table cell, so you could do this .charsheet table tr td button[type="roll"].sheet-derivedattributerollbutton{ this means any button with the derivedattributerollbutton style that is inside a td inside a tr inside a table, on the charsheet. That's very specific! If you are still failing to override the style, it most likely means the style isnt on the button at all - but on something else (like some part of the table). One thing I notice, is that you have bare text inside the button. If you want to apply formatting to that text, its better to put it in a span or div, something like <button class="attributerollbutton" type="roll" value="/roll 2d6 + @{knockout}" name="roll_knockouttest"><span>KO</span></button> then you can apply style directly to the text, like .charsheet button[type="roll"].sheet-derivedattributerollbutton span {
display:inline-block;
text-align:center;
} Then move the text formatting from your button to the span. That said, It's best if you can figure out where the rogue formatting is coming from, and write CSS to directly affect that.