Challenge: Add The Styles using the Class Name
Task
The website provides brief information about the planets. The task is:
Select all elements with the
textclass name and apply thecolorproperty with the valuebrown.Select all elements with the
sub-textclass name and apply thecolorproperty with the valuegrey.
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section>
<h2 class="heading">Jupiter</h2>
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/introduction+to+css/jupiter+challenge.png"
alt="Jupiter"
width="32px"
/>
<p class="sub-text">Was formed 4.5 billion years ago</p>
<p class="text">
Jupiter, the fifth planet from the Sun, is the largest planet in our
solar system. It has a massive red spot and over 70 known moons.
</p>
</section>
<section>
<h2 class="heading">Saturn</h2>
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/introduction+to+css/saturn+challenge.png"
alt="Saturn"
width="32px"
/>
<p class="sub-text">Was formed 4 billion years ago</p>
<p class="text">
Saturn, the sixth planet from the Sun, is known for its iconic rings
made of ice and rock. It has over 80 moons and a unique hexagonal storm.
</p>
</section>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Set the styles here */
.heading {
color: firebrick;
}
/* Change the code below this line */
___ {
___: ___;
}
___ {
___: ___;
}
Use . and its class name (e.g., .text) to select an element by its class name.
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section>
<h2 class="heading">Jupiter</h2>
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/introduction+to+css/jupiter+challenge.png"
alt="Jupiter"
width="32px"
/>
<p class="sub-text">Was formed 4.5 billion years ago</p>
<p class="text">
Jupiter, the fifth planet from the Sun, is the largest planet in our
solar system. It has a massive red spot and over 70 known moons.
</p>
</section>
<section>
<h2 class="heading">Saturn</h2>
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/introduction+to+css/saturn+challenge.png"
alt="Saturn"
width="32px"
/>
<p class="sub-text">Was formed 4 billion years ago</p>
<p class="text">
Saturn, the sixth planet from the Sun, is known for its iconic rings
made of ice and rock. It has over 80 moons and a unique hexagonal storm.
</p>
</section>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
/* Set the styles here */
.heading {
color: firebrick;
}
.text {
color: brown;
}
.sub-text {
color: grey;
}
War alles klar?
Danke für Ihr Feedback!
Abschnitt 1. Kapitel 5
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
