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:

Screen Shot 2014-02-24 at 12.35.33 PM* The bullet-point is an element of the list I placed my assignments in, NOT of the links [I assigned my list an id called “#assignments” and styled it like this:

Screen Shot 2014-02-24 at 2.30.26 PM

This is the CSS styling I added to my link in order to get it to look like this:

 Screen Shot 2014-02-24 at 12.36.10 PM

Screen Shot 2014-02-24 at 1.30.54 PM

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).

-Olivia Combemale

~ by oc435 on February 24, 2014.

One Response to “Styling Links with CSS”

  1. This is the best composed piece because your images and text fit nicely together. The images aren’t stacked vertically and your use of bulleted lists and short snippets lets the reader’s eyes wander around the page without being overwhelmed by mass blocks of text.

Comments are closed.

%d bloggers like this: