Disclaimer: I'm not familiar with CSS.
I became annoyed with nuances of CSS and not getting the look and feel quite right and figuring out different configurations of div's. I stumbled on to something much simpler (to me and hopefully others): use SVG.
Here's an example of a yellow-box:
<html>Look at me - I'm a yellow box!<svg width="20" height="20"><rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" /></svg></html>When used with a jinja template I can configure the fill color by supplying the correct string from python:
<svg width="20" height="20"><rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" /></svg>It's old school, but it's simple and gets the job done.