<div class="container">
  <p>
    <em><small>Click on the anchor links (underlined) and on the paragraph below it to see the styles applied to them when they're active. Try holding the mouse click for a little longer to see the styles better if needed. </small></em>
  </p>
  <br>
  <p>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipisicing elit. <a href="#">Atque</a>, non rerum quae eaque porro fugit deleniti nemo in modi iste recusandae quo earum veritatis et eveniet voluptas magnam <a href="#">dolorum delectus</a>!</p>
  <br>
  <div class="text">
    My background color changes when you click on me.
  </div>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.text {
  padding: 20px;
  background-color: #eee;
}

.text:active {
  background-color: black;
  color: white;
}

a {
  color: deepPink;
}

a:active {
  background-color: deepPink;
  color: white;
}