I’m struggling to understand what they want me to do to complete this challenge
Ive completed up to number two
Blockquote Welcome to Lesson 2 - Challenge 4
Every HTML element can be assigned a class identifier. This is done by including a class attribute and its associated value in the element’s opening tag . Elements that are conceptually grouped in some way can be given the same class attribute value . They should also be given a meaningful name that describes what the element grouping is being used for. We can use CSS to target class attributes and apply a collective style to those elements.
In the last challenge, you applied id styling to a Sporting History web page. In particular, you:
- Added an id and its value to a div element
- Added an id and its value to the div’s child paragraph element
- You then targeted these ids with unique styles
This challenge will build upon the previous one.
In particular, you will:
- Group and style the sports-related content on your web page
- Group and style programming-related content on your web page
Result
Your result should look like the image below.
Steps
-
Add a class attribute to the first two
elements and give each of them the attribute value of sports-history
-
Add a class attribute to the second two
elements and give each of them the attribute value of computing-history
-
Create a style rule beneath the existing id rules that has a corresponding class selector name of sports-history. This will target our sports content
-
Within that rule, add a declaration that sets the color property to orange
-
Create another style rule has a corresponding class selector name of computing-history. This will target our programming content
-
Within that rule add a declaration that sets the color property to green
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lesson 2 Challenge 4</title>
<style>
#heading{
font-family: Arial;
background-color: red;
color: white;
}
#uppercase {
text-transform: uppercase;
}
/* Add your class rules here */
</style>
</head>
<body>
<div id="heading">
<h1> Sporting History</h1>
<p id='uppercase'>
Giants & Heroes
</p>
</div>
<!-- add the correct class here -->
<h3 class="sports-history"> Track & Field </h3>
h3 {color: orange;}
<p>
Some sporting feats ridicule expectations, fewer violate logic but the rarest of all added a defying of gravity to a hat-trick of achievements. At 3.45pm on 18 October 1968 in Mexico City’s Estadio Olímpico Universitario Bob Beamon accomplished all three.
</p>
<!-- add the correct class here -->
<h3 class="sports-history">Rugby</h3>
<p>
With the game locked at 10 - 10 with thirty minutes on the clock, a Munster scrum just outside the Biarritz line enabled Peter Stringer to do the unexpected and break on the blindside for an unforgettable try. A moment of sheer brilliance by the Munster and Ireland scrumhalf. The try proved to be crucial as Munster won by 23 - 19 to lift the European Cup in Cardiff.
</p>
<!-- add the correct class here -->
<h3 class="computing-history">The first Programmer</h3>
<p>
Ada Lovelace was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
</p>
<!-- add the correct class here -->
<h3 class="computing-history" The first Compiler</h3>
<p>
Grace Hopper was an American computer scientist and United States Navy rear admiral. One of the first programmers of the Harvard Mark I computer, she was a pioneer of computer programming who invented one of the first compiler related tools.
</p>
</body>
</html>
