WDD 130: Web Fundamentals

W03 Learning Activities: CSS Selectors – Type, Universal, Class, ID

Overview

CSS selectors allow us to target specific elements on the page on which to apply a collection of CSS declarations. It is the subject line of a CSS rule.

Prepare

Activity Instructions

  1. Navigate to this CodePen ☼ Class and ID Attributes
  2. In the HTML panel, remove the note class from the second paragraph <p> leaving only one class for that paragraph named editorial. What happens? Use the CSS panel to help answer the question.
    Check Your Understanding

    <p class="editorial">
    That second paragraph is no longer styled with the "note" class and therefore loses the italicized font style, bold font weight, and color.

  3. In the HTML panel, add an id attribute to the fourth (last) paragraph <p> and name it highlight.
  4. In the CSS panel, write a CSS rule for the highlight id selector with CSS declarations that
    1. underlines the text
    2. applies a yellowish background color
    3. adds some whitespace around the text (padding)
    Check Your Understanding

    HTML Alterations

    <p id="highlight" class="note"> ... </p>

    CSS Alterations

    #highlight {
        text-decoration: underline;
        background-color: lightyellow;
        padding: 1rem;
      }
    Class and ID Attributes with changes
    Class and ID Attributes with changes

Optional Resources