CSS Links, Lists and Tables
Links, lists and tables are on almost every website, and a little CSS makes each of them look much better.
Styling Links
A link can be in different states. You style each state with a pseudo-class:
| Selector | When it applies |
|---|---|
a:link | A link that has not been visited |
a:visited | A link the user has already opened |
a:hover | The mouse is over the link |
a:focus | The link is selected with the keyboard |
a:active | The moment the link is being clicked |
If you use several, keep this order: link, visited, hover, active. Otherwise later rules can hide earlier ones.
Example
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #264de4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.button-link {
display: inline-block;
background-color: #264de4;
color: white;
padding: 10px 18px;
border-radius: 6px;
}
.button-link:hover {
background-color: #1a36a8;
text-decoration: none;
}
</style>
</head>
<body>
<p>Read our <a href="#">admission policy</a> before you apply.</p>
<a class="button-link" href="#">Apply Now</a>
</body>
</html>Styling Lists
list-style-type changes the marker in front of each item.
| Value | Marker |
|---|---|
disc | Filled circle (default for ul) |
circle | Empty circle |
square | Small square |
decimal | 1, 2, 3 (default for ol) |
upper-roman | I, II, III |
none | No marker |
A List as a Menu
Navigation menus are usually lists with the markers removed and the items placed in a row.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #222222;
}
.menu li {
display: inline-block;
}
.menu a {
display: block;
color: white;
padding: 14px 18px;
text-decoration: none;
}
.menu a:hover {
background-color: #264de4;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>Styling Tables
By default, each table cell has its own border with a gap between them. border-collapse: collapse joins the borders into single lines.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #dddddd;
padding: 10px;
text-align: left;
}
th {
background-color: #264de4;
color: white;
}
tr:nth-child(even) {
background-color: #f2f4fb;
}
tr:hover {
background-color: #e0e7ff;
}
</style>
</head>
<body>
<table>
<tr><th>Student</th><th>Course</th><th>Marks</th></tr>
<tr><td>Ayesha</td><td>Web Development</td><td>92</td></tr>
<tr><td>Ali</td><td>Graphic Design</td><td>85</td></tr>
<tr><td>Hamza</td><td>Python</td><td>78</td></tr>
<tr><td>Sana</td><td>Web Development</td><td>88</td></tr>
</table>
</body>
</html>tr:nth-child(even) colours every second row. These "zebra stripes" help the eye follow a row across the table.
Wide tables break the layout on phones. Put the table inside a <div> with overflow-x: auto, so the table can scroll sideways on small screens.
Exercise
Exercise
Which declaration removes the bullets from a list?