Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: User Action Pseudo-Classes | Introduction to CSS
CSS Fundamentals

Challenge: User Action Pseudo-ClassesChallenge: User Action Pseudo-Classes

Task

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.
html

index.html

css

index.css

js

index.js

  • 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.
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 1. Розділ 7
course content

Зміст курсу

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS

2. Text Styles

Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox

5. Decorative Effects

Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

CSS Fundamentals

Challenge: User Action Pseudo-ClassesChallenge: User Action Pseudo-Classes

Task

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.
html

index.html

css

index.css

js

index.js

  • 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.
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 1. Розділ 7
some-alt