Challenge: User Action Pseudo-Classes and VariablesChallenge: User Action Pseudo-Classes and Variables

Task 1

We have the company website. In the header section of the web page, there is some contact information. The task is to add the color change on hovering the links with the mouse in the header section.

Steps:

  1. select all a elements with the header-link class name;
  2. set the appropriate pseudo-class;
  3. apply the color property with the blue value;
Hint
1. To select an element by its class name, we need to use . and its class name;

2. To react on mouse cursor hover, we need to use :hover pseudo-class;

Task 2

We have a deal with the blog web page. The task is:

  • create a variable and assign it to the #9e6f21 color;
  • apply this variable to all p elements that have a description class name as a value of the color property;

Steps:

  1. Define the color in the :root block.
    • create --description-color variable and assign it to the value #9e6f21
  2. Apply the --description-color variable to <p> elements with class .description.
Hint
1. To create a variable, we need and give it a descriptive name, then we put : and give it a value;

2. Variable value must be #9e6f21;

3. To use a variable, we use var() and in the brackets specify the variable name;

Everything was clear?

Section 1. Chapter 8