Challenge: User Action Pseudo-Classes

Task

We have a company website with contact information in the header section. Your task is to implement a color change when a user hovers over the links in the header section.

Steps:

Select all a elements with the header-link class.
Use the appropriate pseudo-class for the hover effect.
Apply the color property with the value blue when the links are hovered.

index.html

index.css

Use the . and the class name to select an element by its class name.
Use the :hover pseudo-class to react on mouse cursor hover.

index.html

index.css

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 7

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

CSS Fundamentals

1. Introduction to CSS

2. Text Styles

Text Styling Text Formatting Challenge: Text Formatting Adding Custom Fonts to the Web Page Font Properties Challenge: Fonts

3. Box Model and Element Spacing

4. Flexbox

What is the Flexbox? Flex Direction Justifying Content Horizontally Aligning Items Vertically Flex Item Properties Challenge: Flexbox Challenge: Work with Flexbox

5. Decorative Effects

Background Color Background Image Working with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects Further Steps

Challenge: User Action Pseudo-Classes

Task

We have a company website with contact information in the header section. Your task is to implement a color change when a user hovers over the links in the header section.

Steps:

Select all a elements with the header-link class.
Use the appropriate pseudo-class for the hover effect.
Apply the color property with the value blue when the links are hovered.

index.html

index.css

Use the . and the class name to select an element by its class name.
Use the :hover pseudo-class to react on mouse cursor hover.

index.html

index.css

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 7