HTML & CSS: Links 2


Image Link

It is possible to have a link that consists of an image and text. Here is an example:

<a href=""><img src="USPS.jpg">Click on the image or here to visit the U.S. Postal Service site.</a>

Here is the functioning link:

Click on the image or here to visit the U.S. Postal Service site.


E-Mail Link

It can be useful to have a link that, when clicked, starts the process of sending an e-mail. This is called an e-mail link. As an example, the code for an e-mail link to e-mail the President of the U.S. might look like this:

Click on the link to write the President at <A HREF="mailto:"></a> about this important issue.

What is different in an e-mail link from what we've seen before is the "mailto:" part. Here is how the e-mail link to the President would appear:

Click on the link to write the President at about this important issue.


Phone Link

To set up a link that calls a phone number, the syntax is <a href="tel:555-555-5555">Call us</a>.


Open in a New Tab or Window

It is often useful to have a link open in a new tab or window, instead of replacing the contents of the current page. You can use the target attribute, and set it to "_blank," to accomplish this, for example:

<a href="" target="_blank">

You can click this link to see this in action:


CSS Link Properties

It is possible with CSS to customize the color and other properties of a link in various states:

Here are a few examples of using CSS to set link properties:

a:link { color: gray; }
a:hover, a:focus { text-decoration:none; font-size: 150%; }



  • Create a link in which an image and text can be clicked on.
  • Create an email link.
  • Create a phone link.
  • Create a link that opens in a new tab or window.
  • Use CSS to change the properties of links when they are unvisited, visited, active, and have hover/focus.