<figure class="code" id="figure5">
    <pre class=" language-css"><code class=" language-css"><span class="token selector">a:hover, a:active, a:focus </span><span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 2px solid blue <span class="token punctuation">}</span></code></pre>
    <figcaption><b>Figure 5.6</b>: Use CSS to provide a visible outline around items that have keyboard focus. In this example, the same 2 pixel blue outline identifies which item is moused over (hover), active, or has keyboard focus.</figcaption>
</figure>
<figure class="code" id="figure1">
    <pre class=" language-markup">
        <code>
            <label for="firstname">First name:</label>
            <input type="text" id="firstname" />
            <label for="lastname">Last name:</label>
            <input type="text" id="lastname" />
        </code>
    </pre>
    <figcaption><b>Figure 5.1:</b> Labels are visually associated by proximity with text input fields. In code, labels are programmatically connected using the <code>&lt;label&gt;</code> element, the <code>“for”</code> attribute, and the input field’s <code>“id”</code> attribute making the connection.</figcaption>
</figure>
Update pattern: figure with code
Update pattern: figure with code
