Styling Links, Lists and Tables

5 min reading
5 min activity

0 of 4 tasks doneup to 75 XP

Remember: a space in a selector10 XPOptional
Link states in the right order15 XPTo do
Fix the buttons20 XPTo do
Menu and table30 XPTo do

Links, lists and tables are on almost every website. Today you make them clear and friendly: links that show their state, a menu without dots and a table that is clear to read.

In this lesson

Style the four link states and keep links usable for everyone.
Make a link look like a button.
Change or remove list markers.
Style a table: borders, space, header colours, zebra rows and hover.

Remember

A space in a selector means "inside".

Quick check

Remember: a space in a selector

10 XP

A quick question from lesson 3.4. It is optional.

Four link states

A link can be in four states: :link (not visited yet), :visited (the visitor opened it before), :hover (the mouse pointer is over it) and :active (the moment of the click). Write them in this order. "LoVe HAte" helps you remember: L, V, H, A.

Worked example

The slide's rules with readable colours

The slide uses light colours like #3498db (3.15 : 1) and #1abc9c (2.41 : 1) on white. Here they are darker, and the visited colour is navy.

/* 1. Normal link */
a:link {
  color: #0661AB;
}
/* 2. Visited link */
a:visited {
  color: #043E74;
}
/* 3. The mouse pointer is over the link */
a:hover {
  color: #B53D1D;
}
/* 4. The moment of the click */
a:active {
  color: #9E6A07;
}
/* Keyboard users: a clear frame */
a:focus-visible {
  outline: 3px solid #EFA10B;
}

Keep the underline
The slide removes the underline with text-decoration: none. For a link inside a paragraph, keep it: some people cannot see the difference between two colours, so colour alone is not enough.
Think of the keyboard
Some people use the Tab key instead of a mouse. :focus-visible shows them clearly where they are.

Sorting

Link states in the right order

Required 15 XP

A link that looks like a button

Menus and important actions often use links that look like buttons. display: inline-block lets the link take padding like a box.

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1E7E46;   /* the slide's #2ecc71 is too light for white text */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.2s ease;   /* the colour changes softly */
}
.button-link:hover {
  background-color: #17613A;
  transform: translateY(-2px);   /* moves up a little */
}
.button-link:focus-visible {
  outline: 3px solid #EFA10B;
}

A button is not inside a sentence, so it can lose the underline: its shape shows that you can click it.

Practice

Fix the buttons

Required 20 XP

Two button colours from the slides have white text that is too light. Choose a darker background until the contrast is 4.5 : 1 or more.

Lists

list-style-type changes the marker of a list. For <ul>: disc (the default dot), circle, square. For <ol>: decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha, lower-roman (i, ii, iii), upper-roman. none removes the marker. list-style-image: url('arrow.png'); uses a small picture instead.

For a menu, remove the markers and the default space on the left:

.menu-list {
  list-style-type: none;   /* no dots */
  padding: 0;              /* no space on the left */
  margin: 0;               /* no space outside */
}

Tables

Worked example

Join the borders first
When the cells have borders, each cell has its own border, and you see double lines. border-collapse: collapse; joins them into single lines.

Space, header, zebra rows, hover

The slides build the table style in this order:

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
th {
  background-color: #2c3e50;   /* dark header */
  color: white;
}
tr:nth-child(even) {
  background-color: #f8f9fa;   /* every second row */
}
tr:hover {
  background-color: #f1f1f1;   /* the row under the mouse */
}

Your turn: menu and table

Guess first, then style the menu and the table from lesson 2.2.

Practice

Menu and table

Required 30 XP

Style a menu and the study-week table from lesson 2.2. The menu: no dots and no space on the left, and a hover style for the links. The table: collapsed borders, space in the cells, a dark header with white text and zebra rows.

Link states: :link, :visited, :hover, :active: in this order.
:focus-visible: The style when a keyboard user reaches the element.
inline-block: Sits in the line like text, but takes width, height and padding like a box.
list-style-type: The marker of a list item: a dot, a number or none.
border-collapse: With collapse, the cell borders join into single lines.
:nth-child(even): Every second element: the 2nd, 4th, 6th...

In short

Write the link states in the order L, V, H, A, and add :focus-visible for the keyboard.
Keep the underline for links in text; colour alone is not enough.
A menu: list-style-type: none; padding: 0; margin: 0;
A table: border-collapse: collapse first, then padding, a dark header and zebra rows.

Next time

The box model, position and overflow: you calculate how big a box really is and put a badge in its corner.

Sources

MDN Web Docs (2026). :link, :visited, :hover and :active (the LVHA order).
MDN Web Docs (2026). :focus-visible.
MDN Web Docs (2026). text-decoration and transition.
MDN Web Docs (2026). list-style-type.
MDN Web Docs (2026). border-collapse.
MDN Web Docs (2026). :nth-child().
W3C WAI (2026). Understanding Success Criterion 1.4.1: Use of Color (colour alone is not enough for links in text).
W3C WAI (2026). Understanding Success Criterion 2.4.7: Focus Visible.

End of the lesson

This lesson: 0 of 85 XP

Code Cards in this lesson: 5

:visited
text-decoration
transition
list-style-type
border-collapse

Next: The Box Model, Position and Overflow