Menu
Coddy logo textTech

Selection Challenge

Part of the Styling with CSS section of Coddy's HTML journey. Lesson 16 of 76.

challenge icon

Challenge

Easy

You are given an HTML document with various elements, including headings (<h1>, <h2>), paragraphs (<p>), a division (<div>), and an unordered list (<ul>) with list items (<li>). Your task is to use different types of selectors to style these elements. Follow the steps below:

  1. Write a CSS rule using a type selector that targets all <p> elements. Set the text color to blue and the font size to 16 pixels.
  2. Add a class attribute with the value "highlight" to the <h2> element and the <div> element.
  3. Write a CSS rule using a class selector that targets all elements with the class "highlight". Set the background color to yellow.
  4. Add an id attribute with the value "special" to the <ul> element.
  5. Write a CSS rule using an ID selector that targets the element with the ID "special". Set the background color to lightgray and the font size to 20 pixels.
  6. Write a CSS rule using a group selector that targets all <h1> and <li> elements. Set the text color to red.

Try it yourself

<html>
<head>
    <title>Selection Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

All lessons in Styling with CSS

Practice on your own: Web playground