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.
Apply the
--description-colorvariable as a value of thecolorproperty to<p>elements with the class.description.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 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 */
___ {
___: ___;
}
Utilize
--followed by a descriptive name to create a variable, then set the:and assign it a value.Assign the value
#9e6f21to the variable.Employ
var(), and within the brackets, specify the variable name to use the variable as a property value.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Set the styles here */
:root {
--link-color: #19a7ce;
--title-color: #146c94;
--description-color: #9e6f21;
}
.link {
text-decoration: none;
margin: 10px;
color: var(--link-color);
}
.title {
color: var(--title-color);
}
.description {
color: var(--description-color);
}
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 1. Capítulo 10
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
