Challenge: Variables in CSS
Task
We are tasked with styling a blog web page. The objective is as follows:
- Define the color in the
:rootblock:- Create a variable named
--description-colorand assign it the value#9e6f21.
- Create a variable named
- Apply the
--description-colorvariable as a value of thecolorproperty to<p>elements with the class.description.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Blog</h1>
<nav>
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2 class="title">First Blog Post</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit
amet augue libero. Nam consectetur lectus a dolor bibendum, non
euismod nulla ullamcorper.
</p>
</article>
<article>
<h2 class="title">Second Blog Post</h2>
<p class="description">
Curabitur dictum pharetra nisl vel dapibus. Duis et purus vel tellus
sodales congue. Nunc gravida augue vel ex luctus, eget vestibulum nisl
molestie.
</p>
</article>
</main>
/* Set the styles here */
:root {
--link-color: #19a7ce;
--title-color: #146c94;
/* Change code below this line */
___: ___;
/* Change code above this line */
}
.link {
text-decoration: none;
margin: 10px;
color: var(--link-color);
}
.title {
color: var(--title-color);
}
/* Change code below this line */
___ {
___: ___;
}
War alles klar?
Danke für Ihr Feedback!
Abschnitt 1. Kapitel 10
