Recap Challenge #1
Part of the Styling with CSS section of Coddy's HTML journey. Lesson 23 of 76.
Challenge
EasyIn this first recap challenge, you'll apply your knowledge of text styling properties in CSS to recreate a specific design. This challenge will test your ability to combine various text properties, such as color, font-family, font-size, font-weight, text-align, and text-decoration.
You are given an HTML document with various elements. Your task is to apply different properties you have learned in this section to style these elements. Follow the steps below:
- Write a CSS rule that targets all
<h1>elements.- Set the color to dark blue.
- Set the font size to 32px.
- Set the font weight to bold.
- Set the text alignment to center.
- Write a CSS rule that targets the all elements with the class
intro-text.- Set the color to gray.
- Set the font-family to
Arial, Helvetica, sans-serif; - Set the font size to 18px.
- Write a CSS rule that targets all
<li>elements.- Set the font-weight to 600.
- Write a CSS rule that targets all
<a>elements.- Set the text-decoration to none.
- Set the font to your preferred font-family to
"Times New Roman", Times, serif.
Try it yourself
<html>
<head>
<title>Recap Challenge #1</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>Discovering the Ocean</h1>
<p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
<h2>Marine Life</h2>
<ul>
<li>Whales</li>
<li>Octopuses</li>
<li>Coral Reefs</li>
</ul>
<p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>
All lessons in Styling with CSS
4Text Fundamentals
Text ColorFont FamilyFont SizeFont WeightText AlignmentText DecorationRecap Challenge #1Recap Challenge #25 Colors and Backgrounds
Background ColorHEX ColorsRGB ColorsTransparency with RGBARecap Challenge #1Practice on your own: Web playground