Highlight box

[mhulse]

[eta-mark] {
    color: #000 !important;
    background: #ff0;
    margin: 2rem 0;
    padding: 1rem 1.5rem;
}
[eta-mark] > :first-child { margin-top: 0 !important; }
[eta-mark] > :last-child { margin-bottom: 0 !important; }
[eta-mark] a,
[eta-mark] a:visited,
[eta-mark] a:visited:hover,
[eta-mark] a:focus,
[eta-mark] a:focus:hover,
[eta-mark] a:hover,
[eta-mark] a:active {
    color: #000;
    text-decoration: underline;;
}

Usage:

<div eta-mark>

    <p>Copy and paste icon markup from here: <a href="http://fontawesome.io/icons/" target="_blank">fontawesome.io/icons</a></p>

    <p><b>Notes:</b> Using inline style for quick and easy colorization of boxes. Use <code>class="active"</code> to mark a box as active.</p>

</div>

… or:

<p eta-mark>Form styling follows same rules as <a href="http://purecss.io/forms/" target="_blank">Pure.css forms</a> (we use attributes instead of classes).</p>