Pagination

This CSS reference page displays example code that shows how to style tags to create pagination.

Pagination.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
    <style>
      .cPages a {
        color: #808080;
        float: left;
        padding: 10px 20px;
        text-decoration: none;
        transition: background-color .3;
      }
      .cPages a:hover:not(.cCurrent) {
        background-color: #FFEFDF;
      }
      .cPages a.cCurrent {
        background-color: #EFCFBF;
      }
    </style>
  </head>
  <body>
    <div class="cPages">
      <a href="#">&laquo;</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a class="cCurrent" href="#">5</a>
      <a href="#">6</a>
      <a href="#">7</a>
      <a href="#">&raquo;</a>
    </div>
  </body>
</html>

Output

« 1 2 3 4 5 6 7 »