CSS manipulation on re-usable inline rolls

I am prepping for a game that uses a three tier output system and am highlighting the result of the tier so it is obvious which one their rolled resulted in.  I am re-using an inline roll and tried using the CSS manipulation, but am unable to adjust the background color of the re-used roll.  What is interesting is that I can adjust the nearly everything about the re-used roll, but the background color. Does anyone have any insight on why this cannot be adjusted? Here is my snippet of code: {{Tier 1=[$[[12]] Damage](#" style=" color: white; text-shadow: 2px 2px black, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-size: 20px; font-family: cursive; background-color: yellow)}}

This is due to how html and css work. The inline roll is inside the button element that is created, so it's styling is overlaid on top of the button style. There's no way short of writing your own character sheet to adjust the styling of inline rolls.

Something specific to background color I suppose? Because you can see the font and shadowing has been adjusted. You wouldn’t happen to know the default color of an inline roll output would you? Then I can at least make that part match

Some css properties, like font style and color, are inheritable; some, like background color, aren't. I can't remember them all off the top of my head (there's a ton), but you can probably find a list somewhere on the internet. However in addition to the inheritance issue, if a css property has been specified on a child element (e.g the inline roll), it will override the inherited value. As for the color of the inline rolls, I don't know off the top of my head, but you can inspect the html to find out.