Styling Links with Pseudo-classes0%

Styling Links with Pseudo-classes

Beginner9 min read•Updated: 2026-10-01

Styling Links with Pseudo-classes

Welcome to Chapter 8! 🔗

Hyperlinks (<a> tags) are the backbone of the World Wide Web. They allow users to jump from page to page, download documents, and trigger interactive experiences.

By default, every web browser renders links in a vintage 1990s style:

Bright royal blue color
Heavy underline
Dark purple after you click them

While this default styling made the early internet functional, modern websites style links to match brand colors, provide delightful hover feedback, and even transform links into stylish call-to-action buttons.

In this lesson, you will master:

1
The 5 hyperlink pseudo-classes (:link, :visited, :hover, :active, :focus)
2
The essential LVHA ordering rule
3
Removing underlines and crafting modern micro-interactions
4
Turning a humble text link into a clickable button

The School Bus Pass Analogy 🚌

To understand link states, imagine your School Bus Pass Card:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE LIFE CYCLE OF A HYPERLINK                          |
+-------------------------------------------------------------------------+
| 1. :link     --> BRAND NEW BUS PASS                                     |
|                  You just got it at the start of the academic year.     |
|                  Never scanned at the bus gate yet (unvisited).         |
|                                                                         |
| 2. :visited  --> STAMPED BUS PASS                                       |
|                  The conductor has already stamped it. You have ridden  |
|                  this route before (visited page).                      |
|                                                                         |
| 3. :hover    --> BRINGING PASS CLOSE TO SENSOR                          |
|                  Your hand moves the pass near the RFID reader. It      |
|                  glows green anticipating a scan (mouse over link).     |
|                                                                         |
| 4. :active   --> PRESSING THE TOUCHPAD BUTTON                           |
|                  The split second your finger presses down firmly on    |
|                  the machine surface (mouse click held down).           |
|                                                                         |
| 5. :focus    --> HIGHLIGHTED BY FLASHLIGHT                              |
|                  A student using a keyboard hits the "Tab" key. A blue  |
|                  outline marks the pass for accessibility.              |
+-------------------------------------------------------------------------+

What is a Pseudo-class?

A pseudo-class is a special keyword added to a CSS selector preceded by a colon (:). It specifies a special state of the selected element.

Syntax:

1selector:pseudo-class {
2  property: value;
3}

For example, a:hover targets <a> elements only while the user hovers their mouse pointer over them!

The 5 Link States

Let's examine the 5 states you can style for hyperlinks:

1. `a:link` (Unvisited)

Matches any link the user has not yet clicked in their current browser session or history.

1a:link {
2  color: #2563eb; /* Clean modern blue */
3  text-decoration: underline;
4}

2. `a:visited` (Visited)

Matches links the user has already visited.

1a:visited {
2  color: #7c3aed; /* Soft purple */
3}

Note

[!NOTE] Privacy Restriction on :visited: For user security and privacy, modern browsers only permit changing color, background-color, and border colors on :visited. You cannot change font-size, padding, or display to prevent malicious scripts from detecting browsing history.

3. `a:hover` (Mouse Over)

Triggers when the user's mouse cursor hovers over the link. This provides visual feedback showing that the text is clickable.

1a:hover {
2  color: #1d4ed8; /* Darker blue */
3  text-decoration: underline;
4}

4. `a:active` (Clicking Down)

Triggers during the exact millisecond between pressing the mouse button down and releasing it.

1a:active {
2  color: #dc2626; /* Vibrant red click burst */
3}

5. `a:focus` (Keyboard Navigation)

Triggers when a keyboard user navigates the page by pressing the Tab key. This is critical for users with motor disabilities who cannot use a mouse.

1a:focus {
2  outline: 3px solid #f59e0b; /* Visible amber focus ring */
3  outline-offset: 3px;
4}

The Famous LVHA Rule (LoVe HAte) ❤️😡

In CSS, order matters because of the cascade! If you write link pseudo-classes in the wrong order, earlier rules can accidentally override later rules.

To remember the correct order, use the memory trick LoVe HAte:

1L  -->  :link
2V  -->  :visited
3H  -->  :hover
4A  -->  :active

Why does order matter?

If you put a:hover before a:visited:

1
The user visits google.com. The browser marks the link as :visited.
2
When the user hovers over the link, both :visited and :hover apply.
3
Because :visited was declared lower in the CSS file, its color wins, and the hover color will never appear!

Always write them in the order: Link, Visited, Hover, Active!

Removing Underlines & Adding Micro-Interactions

Most modern websites prefer a clean look where links do not have constant underlines, but show an underline or color shift only on hover:

1/* Clean modern text link */
2.nav-link {
3  color: #1e293b;
4  text-decoration: none; /* Strip default underline */
5  font-weight: 500;
6  transition: color 0.2s ease; /* Smooth color transition */
7}
8 
9.nav-link:hover {
10  color: #2563eb;
11  text-decoration: underline; /* Reveal underline on hover */
12}

Transforming a Link into a Clickable Button

In web design, primary call-to-action (CTA) buttons (like "Enroll in Class" or "Download Admit Card") are frequently coded as HTML <a> tags styled to look like buttons.

Because <a> is an inline element by default, top and bottom padding do not push other elements away properly. To fix this, always set display: inline-block:

Visual Architecture Blueprint

+-------------------------------------------------------------+
|               TRANSFORMING <a> INTO A BUTTON                |
+-------------------------------------------------------------+
|  <a> Enroll Now </a>                                        |
|                                                             |
|  + display: inline-block  (allows width, height, padding)   |
|  + background-color       (brand blue or green)             |
|  + color: white           (clean contrast text)             |
|  + padding: 12px 24px     (roomy touch target)              |
|  + border-radius: 6px     (rounded smooth edges)            |
|  + text-decoration: none  (removes vintage underline)       |
|  + box-shadow             (elevated 3D feel)                |
+-------------------------------------------------------------+

Complete Button Link Code:

1.btn-primary {
2  display: inline-block;
3  background-color: #2563eb;
4  color: #ffffff;
5  padding: 12px 26px;
6  font-size: 16px;
7  font-weight: 600;
8  text-decoration: none;
9  border-radius: 8px;
10  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
11  transition: all 0.2s ease;
12}
13 
14/* Hover: Lift up slightly and darken color */
15.btn-primary:hover {
16  background-color: #1d4ed8;
17  transform: translateY(-2px);
18  box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.4);
19}
20 
21/* Active: Press down on click */
22.btn-primary:active {
23  transform: translateY(0);
24  box-shadow: 0 2px 4px -1px rgba(37, 99, 235, 0.2);
25}
26 
27/* Focus: Accessible keyboard focus */
28.btn-primary:focus {
29  outline: 3px solid #93c5fd;
30  outline-offset: 3px;
31}

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Writing `:hover` before `:visited`	Visited links won't show the hover color due to cascade order.	Always follow the LVHA rule: `:link`, `:visited`, `:hover`, `:active`.
Adding padding to `<a>` without `display: inline-block`	Default inline links do not respect vertical padding or margins cleanly.	Add `display: inline-block;` so padding and spacing behave reliably.
Removing `:focus` outline with `outline: none`	Keyboard users cannot see which link is currently selected!	Keep or customize the focus ring: `outline: 3px solid #3b82f6; outline-offset: 2px;`.
Trying to change font-size on `:visited`	Modern browsers block non-color property changes on visited links for security.	Only alter `color` and `background-color` on `:visited`.

Summary Cheat Sheet 📌

Hyperlinks (<a>) represent navigational pathways across the web.
5 Link States: :link (unvisited), :visited (already clicked), :hover (mouse over), :active (mouse pressed down), and :focus (keyboard tabbed).
LVHA Rule: Always declare link pseudo-classes in the order: Link $\to$ Visited $\to$ Hover $\to$ Active (LoVe HAte).
text-decoration: none; removes the default browser underline.
Button Links: Set display: inline-block;, padding, background-color, and border-radius to convert any link into a gorgeous button.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which mnemonic helps you remember the correct cascade order of CSS link pseudo-classes?

Question 2

What happens if you define a:hover before a:visited in your stylesheet?

Question 3

Why must you set display: inline-block when styling an <a> tag as a button with padding?

Question 4

Which CSS property strips away the default browser underline from a hyperlink?

Question 5

Why do modern browsers strictly limit the CSS properties you can customize on a:visited to colors only?

Practice Challenge (Try It Yourself)

1
Create an HTML file named school-portal-links.html.
2
Build a modern school portal header with both text navigation links and a glowing Call-to-Action button:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Portal Navigation Links</title>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: #f1f5f9;
       margin: 0;
       padding: 40px 20px;
     }
13 
     .portal-bar {
       background-color: #ffffff;
       max-width: 850px;
       margin: 0 auto;
       padding: 16px 28px;
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
25 
     .portal-title {
       font-size: 18px;
       font-weight: 700;
       color: #0f172a;
     }
31 
     .nav-group {
       display: flex;
       align-items: center;
       gap: 20px;
     }
37 
     /* LVHA Order for standard navigation links */
     .nav-item:link {
       color: #475569;
       text-decoration: none;
       font-weight: 500;
       transition: color 0.2s ease;
     }
45 
     .nav-item:visited {
       color: #64748b;
     }
49 
     .nav-item:hover {
       color: #2563eb;
       text-decoration: underline;
     }
54 
     .nav-item:active {
       color: #1e40af;
     }
58 
     .nav-item:focus {
       outline: 2px solid #3b82f6;
       outline-offset: 3px;
       border-radius: 4px;
     }
64 
     /* Primary Call to Action Button */
     .btn-cta {
       display: inline-block;
       background-color: #2563eb;
       color: #ffffff !important; /* Keep white even if visited */
       text-decoration: none;
       padding: 10px 20px;
       border-radius: 8px;
       font-weight: 600;
       font-size: 14px;
       box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
       transition: all 0.2s ease;
     }
78 
     .btn-cta:hover {
       background-color: #1d4ed8;
       transform: translateY(-2px);
       box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.4);
     }
84 
     .btn-cta:active {
       transform: translateY(0);
       box-shadow: 0 2px 4px -1px rgba(37, 99, 235, 0.2);
     }
89 
     .btn-cta:focus {
       outline: 3px solid #93c5fd;
       outline-offset: 3px;
     }
   </style>
 </head>
 <body>
   <nav class="portal-bar">
     <div class="portal-title">Delhi Model Public School</div>
     <div class="nav-group">
       <a href="#home" class="nav-item">Home</a>
       <a href="#syllabus" class="nav-item">Syllabus</a>
       <a href="#attendance" class="nav-item">Attendance</a>
       <a href="#fees" class="btn-cta">Pay School Fees</a>
     </div>
   </nav>
 </body>
 </html>

1
Test hovering your mouse over the text links and clicking the "Pay School Fees" button to see the smooth interactive states! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Styling Ordered and Unordered Lists (Links, Lists and Tables Styling).

👉 Continue to Next Lesson: Styling Ordered and Unordered Lists →

Next Lesson

Styling Ordered and Unordered Lists

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Box Shadows and Text Shadows: Depth and Elevation	Styling Ordered and Unordered Lists

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Styling Ordered and Unordered Lists

Styling Links with Pseudo-classes

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Styling Links with Pseudo-classes

Welcome to Chapter 8! 🔗

Hyperlinks (<a> tags) are the backbone of the World Wide Web. They allow users to jump from page to page, download documents, and trigger interactive experiences.

By default, every web browser renders links in a vintage 1990s style:

Bright royal blue color
Heavy underline
Dark purple after you click them

In this lesson, you will master:

1
The 5 hyperlink pseudo-classes (:link, :visited, :hover, :active, :focus)
2
The essential LVHA ordering rule
3
Removing underlines and crafting modern micro-interactions
4
Turning a humble text link into a clickable button

The School Bus Pass Analogy 🚌

To understand link states, imagine your School Bus Pass Card:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE LIFE CYCLE OF A HYPERLINK                          |
+-------------------------------------------------------------------------+
| 1. :link     --> BRAND NEW BUS PASS                                     |
|                  You just got it at the start of the academic year.     |
|                  Never scanned at the bus gate yet (unvisited).         |
|                                                                         |
| 2. :visited  --> STAMPED BUS PASS                                       |
|                  The conductor has already stamped it. You have ridden  |
|                  this route before (visited page).                      |
|                                                                         |
| 3. :hover    --> BRINGING PASS CLOSE TO SENSOR                          |
|                  Your hand moves the pass near the RFID reader. It      |
|                  glows green anticipating a scan (mouse over link).     |
|                                                                         |
| 4. :active   --> PRESSING THE TOUCHPAD BUTTON                           |
|                  The split second your finger presses down firmly on    |
|                  the machine surface (mouse click held down).           |
|                                                                         |
| 5. :focus    --> HIGHLIGHTED BY FLASHLIGHT                              |
|                  A student using a keyboard hits the "Tab" key. A blue  |
|                  outline marks the pass for accessibility.              |
+-------------------------------------------------------------------------+

What is a Pseudo-class?

A pseudo-class is a special keyword added to a CSS selector preceded by a colon (:). It specifies a special state of the selected element.

Syntax:

1selector:pseudo-class {
2  property: value;
3}

For example, a:hover targets <a> elements only while the user hovers their mouse pointer over them!

The 5 Link States

Let's examine the 5 states you can style for hyperlinks:

1. `a:link` (Unvisited)

Matches any link the user has not yet clicked in their current browser session or history.

1a:link {
2  color: #2563eb; /* Clean modern blue */
3  text-decoration: underline;
4}

2. `a:visited` (Visited)

Matches links the user has already visited.

1a:visited {
2  color: #7c3aed; /* Soft purple */
3}

Note

3. `a:hover` (Mouse Over)

Triggers when the user's mouse cursor hovers over the link. This provides visual feedback showing that the text is clickable.

1a:hover {
2  color: #1d4ed8; /* Darker blue */
3  text-decoration: underline;
4}

4. `a:active` (Clicking Down)

Triggers during the exact millisecond between pressing the mouse button down and releasing it.

1a:active {
2  color: #dc2626; /* Vibrant red click burst */
3}

5. `a:focus` (Keyboard Navigation)

Triggers when a keyboard user navigates the page by pressing the Tab key. This is critical for users with motor disabilities who cannot use a mouse.

1a:focus {
2  outline: 3px solid #f59e0b; /* Visible amber focus ring */
3  outline-offset: 3px;
4}

The Famous LVHA Rule (LoVe HAte) ❤️😡

In CSS, order matters because of the cascade! If you write link pseudo-classes in the wrong order, earlier rules can accidentally override later rules.

To remember the correct order, use the memory trick LoVe HAte:

1L  -->  :link
2V  -->  :visited
3H  -->  :hover
4A  -->  :active

Why does order matter?

If you put a:hover before a:visited:

1
The user visits google.com. The browser marks the link as :visited.
2
When the user hovers over the link, both :visited and :hover apply.
3
Because :visited was declared lower in the CSS file, its color wins, and the hover color will never appear!

Always write them in the order: Link, Visited, Hover, Active!

Removing Underlines & Adding Micro-Interactions

Most modern websites prefer a clean look where links do not have constant underlines, but show an underline or color shift only on hover:

1/* Clean modern text link */
2.nav-link {
3  color: #1e293b;
4  text-decoration: none; /* Strip default underline */
5  font-weight: 500;
6  transition: color 0.2s ease; /* Smooth color transition */
7}
8 
9.nav-link:hover {
10  color: #2563eb;
11  text-decoration: underline; /* Reveal underline on hover */
12}

Transforming a Link into a Clickable Button

In web design, primary call-to-action (CTA) buttons (like "Enroll in Class" or "Download Admit Card") are frequently coded as HTML <a> tags styled to look like buttons.

Because <a> is an inline element by default, top and bottom padding do not push other elements away properly. To fix this, always set display: inline-block:

Visual Architecture Blueprint

+-------------------------------------------------------------+
|               TRANSFORMING <a> INTO A BUTTON                |
+-------------------------------------------------------------+
|  <a> Enroll Now </a>                                        |
|                                                             |
|  + display: inline-block  (allows width, height, padding)   |
|  + background-color       (brand blue or green)             |
|  + color: white           (clean contrast text)             |
|  + padding: 12px 24px     (roomy touch target)              |
|  + border-radius: 6px     (rounded smooth edges)            |
|  + text-decoration: none  (removes vintage underline)       |
|  + box-shadow             (elevated 3D feel)                |
+-------------------------------------------------------------+

Complete Button Link Code:

1.btn-primary {
2  display: inline-block;
3  background-color: #2563eb;
4  color: #ffffff;
5  padding: 12px 26px;
6  font-size: 16px;
7  font-weight: 600;
8  text-decoration: none;
9  border-radius: 8px;
10  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
11  transition: all 0.2s ease;
12}
13 
14/* Hover: Lift up slightly and darken color */
15.btn-primary:hover {
16  background-color: #1d4ed8;
17  transform: translateY(-2px);
18  box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.4);
19}
20 
21/* Active: Press down on click */
22.btn-primary:active {
23  transform: translateY(0);
24  box-shadow: 0 2px 4px -1px rgba(37, 99, 235, 0.2);
25}
26 
27/* Focus: Accessible keyboard focus */
28.btn-primary:focus {
29  outline: 3px solid #93c5fd;
30  outline-offset: 3px;
31}

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Writing `:hover` before `:visited`	Visited links won't show the hover color due to cascade order.	Always follow the LVHA rule: `:link`, `:visited`, `:hover`, `:active`.
Adding padding to `<a>` without `display: inline-block`	Default inline links do not respect vertical padding or margins cleanly.	Add `display: inline-block;` so padding and spacing behave reliably.
Removing `:focus` outline with `outline: none`	Keyboard users cannot see which link is currently selected!	Keep or customize the focus ring: `outline: 3px solid #3b82f6; outline-offset: 2px;`.
Trying to change font-size on `:visited`	Modern browsers block non-color property changes on visited links for security.	Only alter `color` and `background-color` on `:visited`.

Summary Cheat Sheet 📌

Hyperlinks (<a>) represent navigational pathways across the web.
5 Link States: :link (unvisited), :visited (already clicked), :hover (mouse over), :active (mouse pressed down), and :focus (keyboard tabbed).
LVHA Rule: Always declare link pseudo-classes in the order: Link $\to$ Visited $\to$ Hover $\to$ Active (LoVe HAte).
text-decoration: none; removes the default browser underline.
Button Links: Set display: inline-block;, padding, background-color, and border-radius to convert any link into a gorgeous button.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which mnemonic helps you remember the correct cascade order of CSS link pseudo-classes?

Question 2

What happens if you define a:hover before a:visited in your stylesheet?

Question 3

Why must you set display: inline-block when styling an <a> tag as a button with padding?

Question 4

Which CSS property strips away the default browser underline from a hyperlink?

Question 5

Why do modern browsers strictly limit the CSS properties you can customize on a:visited to colors only?

Practice Challenge (Try It Yourself)

1
Create an HTML file named school-portal-links.html.
2
Build a modern school portal header with both text navigation links and a glowing Call-to-Action button:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Portal Navigation Links</title>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: #f1f5f9;
       margin: 0;
       padding: 40px 20px;
     }
13 
     .portal-bar {
       background-color: #ffffff;
       max-width: 850px;
       margin: 0 auto;
       padding: 16px 28px;
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
25 
     .portal-title {
       font-size: 18px;
       font-weight: 700;
       color: #0f172a;
     }
31 
     .nav-group {
       display: flex;
       align-items: center;
       gap: 20px;
     }
37 
     /* LVHA Order for standard navigation links */
     .nav-item:link {
       color: #475569;
       text-decoration: none;
       font-weight: 500;
       transition: color 0.2s ease;
     }
45 
     .nav-item:visited {
       color: #64748b;
     }
49 
     .nav-item:hover {
       color: #2563eb;
       text-decoration: underline;
     }
54 
     .nav-item:active {
       color: #1e40af;
     }
58 
     .nav-item:focus {
       outline: 2px solid #3b82f6;
       outline-offset: 3px;
       border-radius: 4px;
     }
64 
     /* Primary Call to Action Button */
     .btn-cta {
       display: inline-block;
       background-color: #2563eb;
       color: #ffffff !important; /* Keep white even if visited */
       text-decoration: none;
       padding: 10px 20px;
       border-radius: 8px;
       font-weight: 600;
       font-size: 14px;
       box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
       transition: all 0.2s ease;
     }
78 
     .btn-cta:hover {
       background-color: #1d4ed8;
       transform: translateY(-2px);
       box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.4);
     }
84 
     .btn-cta:active {
       transform: translateY(0);
       box-shadow: 0 2px 4px -1px rgba(37, 99, 235, 0.2);
     }
89 
     .btn-cta:focus {
       outline: 3px solid #93c5fd;
       outline-offset: 3px;
     }
   </style>
 </head>
 <body>
   <nav class="portal-bar">
     <div class="portal-title">Delhi Model Public School</div>
     <div class="nav-group">
       <a href="#home" class="nav-item">Home</a>
       <a href="#syllabus" class="nav-item">Syllabus</a>
       <a href="#attendance" class="nav-item">Attendance</a>
       <a href="#fees" class="btn-cta">Pay School Fees</a>
     </div>
   </nav>
 </body>
 </html>

1
Test hovering your mouse over the text links and clicking the "Pay School Fees" button to see the smooth interactive states! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Styling Ordered and Unordered Lists (Links, Lists and Tables Styling).

👉 Continue to Next Lesson: Styling Ordered and Unordered Lists →

Next Lesson

Styling Ordered and Unordered Lists

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Box Shadows and Text Shadows: Depth and Elevation	Styling Ordered and Unordered Lists

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Styling Links with Pseudo-classes

The School Bus Pass Analogy 🚌

What is a Pseudo-class?

The 5 Link States

1. a:link (Unvisited)

2. a:visited (Visited)

3. a:hover (Mouse Over)

4. a:active (Clicking Down)

5. a:focus (Keyboard Navigation)

The Famous LVHA Rule (LoVe HAte) ❤️😡

Why does order matter?

Removing Underlines & Adding Micro-Interactions

Transforming a Link into a Clickable Button

Complete Button Link Code:

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Styling Ordered and Unordered Lists

Related Lessons

Practice Quiz

Loading Page Content...

Styling Links with Pseudo-classes

The School Bus Pass Analogy 🚌

What is a Pseudo-class?

The 5 Link States

1. a:link (Unvisited)

2. a:visited (Visited)

3. a:hover (Mouse Over)

4. a:active (Clicking Down)

5. a:focus (Keyboard Navigation)

The Famous LVHA Rule (LoVe HAte) ❤️😡

Why does order matter?

Removing Underlines & Adding Micro-Interactions

Transforming a Link into a Clickable Button

Complete Button Link Code:

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Styling Ordered and Unordered Lists

Related Lessons

Practice Quiz

1. `a:link` (Unvisited)

2. `a:visited` (Visited)

3. `a:hover` (Mouse Over)

4. `a:active` (Clicking Down)

5. `a:focus` (Keyboard Navigation)

1. `a:link` (Unvisited)

2. `a:visited` (Visited)

3. `a:hover` (Mouse Over)

4. `a:active` (Clicking Down)

5. `a:focus` (Keyboard Navigation)