<div class="container">
  <div class="element">
    <a href="#">Link that doesn't go anywhere.</a>
    <a href="#id">Internal Link.</a>
    <a href="http://sarasoueidan.com/">External Link.</a>
    <a>Anchor tag without <code>href</code>.</a>
  </div>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
}

a {
  display: block;
  margin-bottom: 1em;
  color: deepPink;
}

a:active {
  background-color: white;
}
/* move the :link styles up above the :active styles according to the LoVe HAte rule to make sure
the :active styles are not overridden by the :link styles */

a:link {
  background-color: #222;
  padding: .5em;
}