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