<p>When adding a link to a page, the default is blue text (or purple if visited) with an underline like so: <a id="a-underline" href="../../Home">Home</a></p>
<p> </p>
<p>Let's give this a little bit of style. Enter the following in your CSS to remove the underline: </p>
<p><code>a {text-decoration: none;}</code></p>
<p>You should now have a link without an underline like this: <a id="no-underline" href="../../index.html">Home</a></p>
<p> </p>
<p>Now, let's give it a new font color.</p>
<p><code>a {text-decoration: none;</code></p>
<p><code> color: green}</code></p>
<p>And the link looks like: <a id="font-color" href="index.html">Home</a></p>
<p> </p>
<p>Next, let's give it some background color and a different color when we hover over it:</p>
<p><code>a:hover {background-color: black;</code></p>
<p><code> color: white;}</code></p>
<p>And the link looks like: <a id="last-link-style" href="index.html">Home</a></p>
<p>Hover over it to see the color change.</p>
<p> </p>
<p>You can play around with padding and border-radius to change the shape and size of the background.</p>
<p><code>a {text-decoration: none;</code></p>
<p><code> color: green;</code></p>
<p><code> padding: .5rem;</code><code>}</code></p>
<p><code>a:hover {background-color: black; </code></p>
<p><code> border-radius: 3rem;</code></p>
<p><code> color: white;} </code> </p>
<p> </p>
<p>Our new link: <a id="verylast-link-style" href="index.html">Home</a></p>