Menu

Tech

English

Highlight Active Menu

Part of the CSS Mastery section of Coddy's HTML journey. Lesson 39 of 43.

Challenge

Easy

A simple navigation menu is given with four links. Your task is to make it more interactive using pseudo-classes.

Write CSS to:

Change the background color of a link when a user hovers over it to rgba(50, 168, 82, 1).
Change the text color to white when the link is actively being clicked.

Try it yourself

<html>
<head>
  <title>Highlight Active Menu</title>
  <style> 
    nav a {
      padding: 10px;
      text-decoration: none;
      color: black;
    }
    /* Add your styles here */

  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#" class="active">Blog</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

All lessons in CSS Mastery

1Selector Mastery – Combination

Introduction Descendant Selector Child Selector Adjacent Sibling Selector General Sibling Selector Recap Challenge

4Dropdown Menu Project

Add the Submenu Show the Submenu More styling Input and button

7Build with CSS Grid

Grid Basics Grid-row Item Placement Named Areas Recap Challenge

2Interactive Pseudo-Classes

Pseudo-Classes Hover Effects Focus Effects Active Styles Recap Challenge

5Visual effects

Gradients CSS Filters Transform Transitions & Hover Effects Recap Challenge

8Flavor Fiesta website

Setting the grid Header The main part Footer

3Structural pseudo-classes

Structural pseudo-classes Targeting the First Child Targeting the Last Child Pattern Power: Using nth-child Recap Challenge

6Landing Page

Style the Header Section Style the button Section Layout Card Layout Add Finishing Touches

9Final Challenges

Highlight Active MenuZebra Table Rows Button Hover Effect Grid Card Layout Blurred Hero Image

Practice on your own: Web playground