Try It Yourself: CSS Links and Lists

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Lists and Links</title>
  <meta charset="UTF-8">
</head>
<body>

<h2>CSS Links</h2>

<p><a href="#" class="newlink">This is a link</a></p>

<h2>CSS Lists</h2>

<ul class="myul">
  <li><a href="#">List Item 1</a></li>
  <li><a href="#">List Item 2</a></li>
  <li><a href="#">List Item 3</a></li>
  <li><a href="#">List Item 4</a></li>
  <li><a href="#">List Item 5</a></li>
</ul>

<style>
.newlink:link {
  color: #fff;
  background: #222;
  padding: 5px 15px;
  text-decoration: none;
}
.newlink:visited {
  color: #f00;
  background: #fff;
  padding: 5px 15px;
  text-decoration: none;
}
.newlink:hover {
  color: #069;
  background: #ccc;
  padding: 5px 15px;
  text-decoration: none;
}
.newlink:focus{
  color: #fff;
  background: #222;
  padding: 5px 15px;
  text-decoration: none;
}  
ul{
  padding: 10px;
  list-style-type: none;
}
ul li a{
  color: #fff;
  background: #333;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  margin-bottom: 5px;
}
ul li a:hover, ul li a:focus{
  background: #fff;
  color: #333;
}
</style>
</body>
</html>

CSS Code

/* Write your CSS here */

CSS Links and Lists - Playground