Course Content
CSS Fundamentals
CSS Fundamentals
Challenge: 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:
- select all
a
elements with theheader-link
class name; - set the appropriate pseudo-class;
- apply the
color
property with theblue
value;
Hint
1. To select an element by its class name, we need to use
2. To react on mouse cursor hover, 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 adescription
class name as a value of thecolor
property;
Steps:
- Define the color in the
:root
block.- create
--description-color
variable and assign it to the value#9e6f21
- create
- Apply the
--description-color
variable to<p>
elements with class.description
.
Hint
1. To create a variable, we need
2. Variable value must be
3. To use a variable, we use
—
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