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

book
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:

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

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<a class="header-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="header-link" href="tel:+4127203413">412-720-3413</a>
</header>
<section>
<p>
At SupportDev, our mission is to empower individuals and businesses by
providing top-notch technical support. We understand the challenges that
come with navigating the complex world of technology, and we are here to
simplify it for you. Whether you're a startup, a small business, or an
individual seeking assistance, SupportDev is your trusted partner in
technology.
</p>
</section>
<footer>
<a class="footer-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="footer-link" href="tel:+4127203413">412-720-3413</a>
</footer>
</body>
</html>
  • 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

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<a class="header-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="header-link" href="tel:+4127203413">412-720-3413</a>
</header>
<section>
<p>
At SupportDev, our mission is to empower individuals and businesses by
providing top-notch technical support. We understand the challenges that
come with navigating the complex world of technology, and we are here to
simplify it for you. Whether you're a startup, a small business, or an
individual seeking assistance, SupportDev is your trusted partner in
technology.
</p>
</section>
<footer>
<a class="footer-link" href="mailto:support@dev.io">support@dev.io</a>
<a class="footer-link" href="tel:+4127203413">412-720-3413</a>
</footer>
</body>
</html>

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 7
some-alt