Styling Links with CSS
In order to add the TOS Privacy Rubric to your website, for example, you need to create a link from your home page to wherever your saved the rubric’s page. Below is the HTML syntax I used to link my “Privacy Rubric” text to my “privacyrubric.html” page:
<a href=”privacyrubric.html”>Privacy Rubric</a>
Once the link is in your HTML doc, you need to make sure your stylesheet knows exactly which HTML element to style, as well as what styles you want to apply.
With links, there are four “states,” each of which can be styled by any CSS property. They are:
- a:link = unvisited link
- a:visited = visited link
- a:hover = mouse over link
- a:active = selected link
Before adding any styling properties, my “Privacy Rubric” link looked like this:
This is the CSS styling I added to my link in order to get it to look like this:
While the link styling for my site is rather simple and doesn’t take advantage of many ways in which you can change the appearance of your links, the syntax listed above offers the basic input for styling links in CSS.
NOTE – it is important to list the link states in the following order (a:link, a:visited, a:hover, a:active).