Completion requirements
<!DOCTYPE html>
<html>
<head>
<title>Simple Selectors</title>
<style>
/* all h2 elements */
xxx {
color: red;
text-align: center;
}
/* all with class="highlight" */
xxx {
font-size: 20px;
font-weight: bold;
font-style: italic;
background-color: green;
opacity: 0.6;
}
/* element with id="mainPoint" */
xxx {
font-size: 24px;
font-weight: bold;
background-color: red;
opacity: 0.7;
}
/* all p AND h1 elements */
xxx {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Simple Selectors (h1)</h1>
<h2>Subheading 1 (h2)</h2>
<p class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus amet alias est? Nobis cum quasi at soluta odit,
maiores quaerat dolores expedita ex nemo ea repellendus dolorem sed maxime quos?</p>
<p class="highlight">Paragraph with attribute class="highlight". Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2>Subheading 2 (h2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nemo ipsum dolores vel modi magnam veniam alias at nam. Voluptatem officiis
dolor dolorem aspernatur dolorum modi ipsa, nobis animi aut!</p>
<div>This is the main point of the entire article. So, attribute <span id="mainPoint">id="mainPoint".</span>
</div>
</body>
</html>
Make a submission
Receive a grade
Due: Friday, 17 October 2025, 5:00 PM
This is a quick and simple practice non-graded exercise on applying basic CSS using basic selectors.
Follow the instructions below:
- In your portfolio, create Q21NGSectionLastName.html and place the sample code below.
- Edit the CSS style rule by changing xxx with the right selector to achieve the desired layout and design of the page as shown also below.
- Edit your index.html to include a link to this non-graded exercise.
- Submit your GitHub repository link and also your GitHub live server link. Please do not submit a link that starts with 127.0.0.1 or localhost, I will not be able to check you work
Reminder:
Your work should be your own, if you used an AI to do this exercise or
had referred to resource online or even offline please do a proper
citation as part of your web page (client facing)
Citing AI resource: (OpenAI, personal communication, January 16, 2023).
<!DOCTYPE html>
<html>
<head>
<title>Simple Selectors</title>
<style>
/* all h2 elements */
xxx {
color: red;
text-align: center;
}
/* all with class="highlight" */
xxx {
font-size: 20px;
font-weight: bold;
font-style: italic;
background-color: green;
opacity: 0.6;
}
/* element with id="mainPoint" */
xxx {
font-size: 24px;
font-weight: bold;
background-color: red;
opacity: 0.7;
}
/* all p AND h1 elements */
xxx {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Simple Selectors (h1)</h1>
<h2>Subheading 1 (h2)</h2>
<p class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus amet alias est? Nobis cum quasi at soluta odit,
maiores quaerat dolores expedita ex nemo ea repellendus dolorem sed maxime quos?</p>
<p class="highlight">Paragraph with attribute class="highlight". Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2>Subheading 2 (h2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nemo ipsum dolores vel modi magnam veniam alias at nam. Voluptatem officiis
dolor dolorem aspernatur dolorum modi ipsa, nobis animi aut!</p>
<div>This is the main point of the entire article. So, attribute <span id="mainPoint">id="mainPoint".</span>
</div>
</body>
</html>
Expected output as shown below: