Experiment 5: CSS Selectors (ID, Class, Type)

Student Information

Name:UMER FAROOQ
Registration ID:FA22-BCE-048

Lab Task 1: Demonstrate Type Selector

This paragraph is styled using the **Type Selector** (the `p` selector). Notice that every paragraph on this page has the same light gray border and italic text.

Lab Task 2: Demonstrate Class Selector

This paragraph is styled using the **Class Selector** (`.highlight`). It overrides someof the Type Selector styles and adds a yellow background and bold text. Multiple elements can use the same class.

This is a normal paragraph to show the difference.

Lab Task 3: Demonstrate ID Selector

The main title above is styled using the **ID Selector** (`#main-heading`). This selector is meant for elements that are unique on the page.

Report Requirements and Instructions

Experiment 5 requires the successful demonstration of the three core CSS selector types:

  1. **Type Selector (Element Selector):** Styling all instances of a tag (e.g., `p`, `h1`).
  2. **Class Selector:** Styling elements using the `class="[name]"` attribute.
  3. **ID Selector:** Styling the unique element using the `id="[name]"` attribute.
Go Back