Adding inline styles from a widget

Got it. So here’s how you insert a hover state halfway the processing of a page without violating the w3c rules. This is the code you don’t want your widget to produce:

<div class="mywidget">
<style>.mywidget a {color:red}, . mywidget a:hover {color:blue;}</style>
<a>Link</a>
</div>

The following validates and is fairly elegant. In your widget generate the following code:

<div class="mywidget">
<a style="color:blue;"><span style="color:red;">Link</span></a>
</div>

In your style.css you add this generic line with a transition effect as bonus:

.mywidget a span {transition:color 1s;}
.mywidget a:hover span {color:inherit !important;}

Tested in Firefox 38, Chrome 34 and IE 11