Module 3 · Typography · Lesson 3 of 3

CSS Links & Lists

Beginner ⏱ 15 min2 sections · 1 exercise · 4-question quiz

Links have five states and lists have hidden defaults — two small topics that show up on every page you'll ever build, and the first real taste of pseudo-class styling.

1. Link states: LVHFA order

CSS — style states in this order

a:link    { color: #3E6787; }
a:visited { color: #6E5A94; }
a:hover   { color: #E0594A; text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid #5A8AB9; outline-offset: 2px; }
a:active  { color: #AE392D; }

Order matters because these pseudo-classes share specificity — remember LoVe HAte (link, visited, hover, active), with focus alongside hover. Never remove focus outlines without replacing them; keyboard users navigate by them.

2. Lists: resetting and restyling

CSS — the nav-list reset

nav ul {
  list-style: none;   /* no bullets  */
  margin: 0;
  padding: 0;         /* browsers indent by default */
}
ul.checks { list-style: "✔ "; }   /* custom marker */

Browsers give lists bullets plus default padding — the first thing every navigation menu removes. list-style-position: inside tucks markers into the text block, and modern browsers accept a string (even an emoji) as the marker.

3. Try it yourself

Turn the list into a clean horizontal nav: remove bullets and padding, then give links a hover state that turns them #E0594A and removes the underline.

exercise.html — editable

4. Quiz — check your understanding

CSS Links & Lists Quiz

4 questions · pass at 60%

Q1. Which pseudo-class targets a link the user's pointer is over?

:active:hover:visited:focus

:hover fires while the pointer is over the element; :active only during the click itself.

Q2. Why must link states follow the LVHA order?

Alphabetical requirementThey share specificity, so source order decides conflictsBrowsers cache them that wayThey don't — order is irrelevant

Equal specificity means the last matching rule wins; wrong order silently disables states.

Q3. Removing bullets from a list uses…

bullets: nonelist-style: nonemarker: offdisplay: plain

list-style: none clears the marker; you'll usually zero the default padding too.

Q4. What should you do about :focus outlines?

Always remove them — they're uglyKeep or replace them with a visible alternativeOnly style them on mobileSet them to 0px

Focus indication is how keyboard users see where they are. Restyle it; never erase it.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →