Lab Activity | Web Design Technologies

Class Flow

Build HTML targets → link external CSS → apply selectors one by one → verify output after each step.

1) Overview 2) HTML Targets 3) External CSS 4) Verification

Outcomes

Target

Apply element, .class, #id selectors correctly
Use group and descendant selectors to target multiple elements
Understand impact of universal selector (*) and how to use it carefully

Setup

Tools

VS Code / Notepad++
Chrome / Edge / Firefox
Files: index.html + selectors.css

Rule of Thumb

Pro Tip

Start broad (element) → then become precise (class/id)
Prefer classes for reusable styling
Use * carefully (it affects everything)

IN-CLASS PRACTICAL 2B (Part 2) ACTIVITY

Types of CSS Selectors (External CSS File Only)

Do 1 task → save → refresh → verify. Repeat until all selector types are applied.

Pair / Small Group Allowed

Task 1 Warm-up

Create Folder + File

Goal: Create a clean workspace for practising CSS selectors.

Student action (do this now):

Create a new folder named: RegNo_Practical2_2
Inside the folder, create a file named: index.html
Open the folder in VS Code / Notepad++

Suggested:

Example folder name: 10DDT23F1705_Practical2_2

Task 2 Build Together

Create Basic HTML Skeleton (Using Emmet)

Goal: Generate a valid HTML document structure using Emmet (!).

Student action (do this now):

Open index.html in VS Code.
Type ! then press Tab / Enter.
Change the <title> as shown below.
Save the file.

Expected output after using !

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practical 2.2 - CSS Selectors</title>
</head>
<body>

</body>
</html>

Suggested:

If Emmet does not expand: ensure file is saved as .html and try Ctrl + Space.

Task 3 HTML Targets

Add Content for Selector Practice (Paste Inside <body>)

Goal: Create elements that can be targeted using element, class, id, group, descendant, and universal selectors.

Student action (do this now):

Inside <body>...</body>, paste the HTML block below.
Save → Open in browser → Refresh.
Verify: You can see the title, a paragraph, a “note box”, a list, and a mini card area.

Paste this inside <body>


                
              <header>
  <h1>Types of CSS Selectors</h1>
  <p>We will practise element, class, id, group, descendant, and universal selectors using external CSS.</p>
</header>

<main>

  <section>
    <h2>Selector List (Reference)</h2>
    <ul>
      <li>Element Selector</li>
      <li>Class Selector</li>
      <li>ID Selector</li>
      <li>Group Selector</li>
      <li>Descendant Selector</li>
      <li>Universal Selector</li>
    </ul>

    <p>Tip: We will style this list using different selector types step-by-step.</p>
  </section>

  <section>
    <h2>Practice Area</h2>

    <div>
      <strong>Note:</strong> This box will be styled later using a class selector.
    </div>

    <div>
      <div>
        <h3>Card A</h3>
        <p>This paragraph will be targeted using a descendant selector.</p>
      </div>

      <div>
        <h3>Card B</h3>
        <p>This card will later be styled using a class selector.</p>
      </div>
    </div>

    <p>Next: create an external CSS file and apply selectors one by one.</p>
  </section>

</main>

<footer>
  <p>Practical 2B - CSS Selectors (External CSS Only)</p>
</footer>

Suggested:

Jangan risau pasal rupa dulu—sekarang fokus pastikan content keluar dulu (baseline).

Task 4 External CSS

Create External File + Link It (selectors.css)

Goal: Create selectors.css and connect it to index.html. After this, all selector styling will be written in ONE external file.

Student action (do this now):

Create a new file in the same folder as index.html.
Name it selectors.css.
In index.html, inside <head>, add the link tag below.
Save index.html → Refresh browser.

index.html (inside <head>)

<link rel="stylesheet" href="selectors.css">

Verification (must do):

In selectors.css, paste this ONE line only:
body { background: #fff7ed; }
Save → Refresh browser.
If page background changes, linkage is correct ✅

Suggested:

Pastikan selectors.css dan index.html duduk folder yang sama level.

Task 5 Universal Selector (*)

APPLY UNIVERSAL SELECTOR

Goal: Understand how the universal selector (*) affects all elements globally.

Step 1: Create the universal selector (type manually)

Open selectors.css.
At the top of the file, write this selector (do NOT add anything yet):

selectors.css

* {
        }

Step 2: Add properties (you may copy now)

Add the following properties inside your universal selector.
Save the file.

selectors.css

box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;

Step 3: Refresh & observe

Refresh your browser.
Observe changes in font and spacing.
Notice how ALL elements are affected.

Think: Why is the universal selector powerful but risky if overused?

Task 6 Element Selector

APPLY ELEMENT SELECTORS

Goal: Style elements by tag name (body, h1, h2, p) — no class/id yet.

Step 1 (body): Create selector (type manually)

After Task 5, type this selector only:

selectors.css

body {
}

Step 2 (body): Copy properties

Paste inside body selector:

selectors.css

margin: 0;
padding: 24px;
background: #ffffff;
color: #0f172a;

Step 3 (h1): Create selector (type manually)

Type this selector below body:

selectors.css

h1 {
}

Step 4 (h1): Copy properties

Paste inside h1 selector:

selectors.css

margin: 0 0 8px;
text-align: center;
letter-spacing: 1px;

Step 5 (h2): Create selector (type manually)

Type this selector below h1:

selectors.css

h2 {
}

Step 6 (h2): Copy properties

Paste inside h2 selector:

selectors.css

margin: 0 0 10px;
color: #dc2626;
text-transform: uppercase;
font-size: 1.05rem;

Step 7 (p): Create selector (type manually)

Type this selector below h2:

selectors.css

p {
}

Step 8 (p): Copy properties

Paste inside p selector:

selectors.css

line-height: 1.6;
margin: 10px 0;

Final: Refresh & observe

Refresh your browser.
Observe spacing, font consistency, and readability.

Think: Why is styling body first important before other elements?

Task 7 Class Selector

APPLY CLASS SELECTORS

Goal: Create class rules in CSS first, then apply those classes in HTML (.subtitle, .panel, .note, .highlight).

Step 1 (.subtitle): Create the class selector in CSS (type manually)

Open selectors.css.
After Task 6, type this class selector (do NOT add properties yet):

selectors.css

.subtitle {
}

Step 2 (.subtitle): Copy properties into .subtitle

Paste these properties inside your .subtitle selector.
Save the file.

selectors.css

text-align: center;
color: #475569;
margin-bottom: 18px;

Step 3 (.subtitle): Apply the class in HTML

Open your HTML file.
Find the paragraph under the main heading and add class="subtitle".
Save HTML → Refresh browser → Observe the subtitle becomes centred.

<p class="subtitle">We will practise element, class, id, group, descendant, and universal selectors using external CSS.</p>

Step 4 (.panel): Create the class selector in CSS (type manually)

Back to selectors.css.
Type this selector below .subtitle (no properties yet):

selectors.css

.panel {
}

Step 5 (.panel): Copy properties into .panel

Paste these properties inside your .panel selector.
Save the file.

selectors.css

background: #f8fafc;
border: 1px solid rgba(15,23,42,.12);
border-radius: 14px;
padding: 18px;
margin: 16px auto;
max-width: 900px;

Step 6 (.panel): Apply the class in HTML

In HTML, add class="panel" to BOTH <section> blocks.
Save HTML → Refresh browser → Observe sections now look like cards.

<section class="panel">...</section>

Step 7 (.note): Create the class selector in CSS (type manually)

Back to selectors.css.
Type this selector below .panel (no properties yet):

selectors.css

.note {
}

Step 8 (.note): Copy properties into .note

Paste these properties inside your .note selector.
Save the file.

selectors.css

background: rgba(13,110,253,.08);
border: 1px solid rgba(13,110,253,.22);
border-radius: 12px;
padding: 12px 14px;
margin: 12px 0 16px;

Step 9 (.note): Apply the class in HTML

In HTML, find the Note box <div>.
Add class="note".
Save HTML → Refresh browser → Observe the note box now stands out.

<div class="note">
  <strong>Note:</strong> This box will be styled later using a class selector.
</div>

Step 10 (.highlight): Create the class selector in CSS (type manually)

Back to selectors.css.
Type this selector below .note (no properties yet):

selectors.css

.highlight {
}

Step 11 (.highlight): Copy properties into .highlight

Paste this property inside your .highlight selector.
Save the file.

selectors.css

border: 2px solid rgba(255,193,7,.9);

Step 12 (.highlight): Apply the class in HTML

In HTML, find the container that holds Card B.
Add class="highlight" to that <div>.
Save HTML → Refresh browser → Observe Card B gets a highlight border.

<div class="highlight">
  <h3>Card B</h3>
  <p>This card will later be styled using a class selector.</p>
</div>

Final: Refresh & observe (full check)

Refresh your browser.
Observe: subtitle alignment + colour change.
Observe: sections appear as “cards”.
Observe: note box stands out.
Observe: Card B has a highlight border.

Think: Why can the same class be reused on many elements, but still produce consistent styling?

Task 8 ID Selector

APPLY ID SELECTORS

Goal: Style unique elements using ID selectors (#pageTitle, #practiceArea).

Step 1 (#pageTitle): Create the ID selector in CSS (type manually)

Open selectors.css.
After Task 7, type this selector (no properties yet):

selectors.css

#pageTitle {
}

Step 2 (#pageTitle): Copy properties into #pageTitle

Paste these properties inside your #pageTitle selector.
Save the file.

selectors.css

color: #ef4444;
font-size: 2rem;

Step 3 (#pageTitle): Apply the ID in HTML

Open your HTML file.
Find the main heading:
Add id="pageTitle" to the <h1> tag.
Save HTML → Refresh browser → Observe title colour & size change.

<h1 id="pageTitle">Types of CSS Selectors</h1>

Step 4 (#practiceArea): Create the ID selector in CSS (type manually)

Back to selectors.css.
Type this selector below #pageTitle (no properties yet):

selectors.css

#practiceArea {
}

Step 5 (#practiceArea): Copy properties into #practiceArea

Paste this property inside your #practiceArea selector.
Save the file.

selectors.css

border-left: 6px solid rgba(32,201,151,.55);

Step 6 (#practiceArea): Apply the ID in HTML

In HTML, find the section titled Practice Area.
Add id="practiceArea" to that <section> tag.
Save HTML → Refresh browser → Observe left border appears.

<section id="practiceArea">
  <h2>Practice Area</h2>
  ...
</section>

Final: Refresh & observe (ID behaviour)

Refresh your browser.
Observe: page title changes colour & size.
Observe: practice area has a left accent border.
Confirm: each ID is used only once.

Think: Why should IDs be used for unique elements and not for repeated styling?

Task 9 Group Selector

APPLY GROUP SELECTOR

Goal: Style multiple different selectors using a single CSS rule.

Step 1: Create the group selector (type manually)

Open selectors.css.
After Task 8, type this group selector (no properties yet):

selectors.css

h3, .footerText, footer p {
}

Step 2: Copy the property

Add this property inside your group selector.
Save the file.

selectors.css

color: #2563eb;

Step 3: Apply class for group selector (HTML)

Open your HTML file.
Find this paragraph:
Add class="footerText" to it.

<p class="footerText">Next: create an external CSS file and apply selectors one by one.</p>

Step 4: Refresh & observe

Refresh your browser.
Observe all <h3> headings turn blue.
Observe footer text colour changes.
Observe how one rule affects different selector types.

Think: Why is grouping different selectors more efficient than writing separate rules?

Task 10 Descendant Selector

APPLY DESCENDANT SELECTOR

Goal: Target elements only when they are inside a certain container (.cards p, .selector-list li).

Step 1 (.cards p): Create the selector in CSS (type manually)

Open selectors.css.
After Task 9, type this selector (no properties yet):

selectors.css

.cards p {
}

Step 2 (.cards p): Copy properties

Add these properties inside .cards p.
Save the file.

selectors.css

margin: 8px 0 0;
color: #334155;

Step 3 (.cards): Ensure the HTML container exists

Open your HTML file.
Find the container that wraps Card A and Card B.
Add class="cards" to that wrapper <div>.

<div class="cards">
  <div>
    <h3>Card A</h3>
    <p>This paragraph will be targeted using a descendant selector.</p>
  </div>

  <div>
    <h3>Card B</h3>
    <p>This card will later be styled using a class selector.</p>
  </div>
</div>

Step 4 (.selector-list li): Create the selector in CSS (type manually)

Back to selectors.css.
Type this selector below .cards p (no properties yet):

selectors.css

.selector-list li {
}

Step 5 (.selector-list li): Copy properties

Add these properties inside .selector-list li.
Save the file.

selectors.css

padding: 6px 0;
border-bottom: 1px dashed rgba(15,23,42,.18);

Step 6 (.selector-list): Ensure the HTML list has a container class

In HTML, find the selector reference list (<ul>).
Add class="selector-list" to the <ul>.

<ul class="selector-list">
  <li>Element Selector</li>
  <li>Class Selector</li>
  <li>ID Selector</li>
  <li>Group Selector</li>
  <li>Descendant Selector</li>
  <li>Universal Selector</li>
</ul>

Suggested:

Descendant selector dibaca macam ni: .cards p = “semua p yang berada di dalam .cards sahaja”. Jadi p lain dekat page tak kacau.

Final: Refresh & observe

Refresh your browser.
Observe: paragraph dalam .cards nampak lebih kemas (spacing + colour).
Observe: item li dalam .selector-list ada dashed line di bawah.
Confirm: hanya content dalam container yang terkesan.

Checkpoint (Screenshot Required):

Ambil 1 screenshot yang jelas tunjuk: list selector ada garisan dashed dan paragraph dalam cards nampak berbeza.

Think: Why does .cards p not affect paragraphs outside .cards?

Task 11 Layout (Class + Descendant)

MAKE “CARDS” DISPLAY SIDE-BY-SIDE

Goal: Bagi section .cards nampak macam 2 card sebelah-sebelah (basic layout). Ini beginner-friendly—tak perlu framework, just CSS.

Before you start (HTML check)

Pastikan dalam HTML memang ada container class="cards".
Dan setiap card ada class="card-item".
Kalau dah ada (Task 7/10), teruskan ke Step 1.

<div class="cards">
  <div class="card-item">
    <h3>Card A</h3>
    <p>...</p>
  </div>

  <div class="card-item">
    <h3>Card B</h3>
    <p>...</p>
  </div>
</div>

Step 1: Create layout selectors in CSS (type manually)

Open selectors.css.
Add these selectors after Task 10 (don’t paste properties yet):

selectors.css

.cards {
}

.card-item {
}

.card-item h3 {
}

Step 2: Copy properties into each selector

Copy the properties below into the correct selector blocks.
Save → Refresh browser.

selectors.css

/* Task 11: Cards Layout (simple grid) */

/* Layout: place card items side-by-side */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

/* Card box styling */
.card-item {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  padding: 14px;
}

/* Descendant: only style headings inside card-item */
.card-item h3 {
  margin: 0 0 6px;
  letter-spacing: .5px;
}

Step 3: Verify output (observe)

Bila screen cukup lebar, Card A & Card B akan jadi 2 kolum (side-by-side).
Setiap card nampak macam “box” (padding + border halus).
Tajuk h3 dalam card nampak lebih kemas (spacing berubah).

Suggested:

Kalau screen kecil (phone), 2 columns mungkin sempit. Itu normal. Nanti bila masuk responsive design, kita akan adjust guna media query.

Checkpoint (Optional Screenshot):

Ambil screenshot bila Card A & Card B jelas duduk sebelah-sebelah.

Think: Why does .card-item h3 only affect headings inside cards, not all h3 on the page?

Task 12 Final Polish

STYLE FOOTER + SMALL ENHANCEMENTS

Goal: Kemaskan closing section supaya nampak “complete page” (footer + elemen kecil).

Step 1 (footer): Create the selector in CSS (type manually)

Open selectors.css.
After Task 11, type this selector (no properties yet):

selectors.css

footer {
}

Step 2 (footer): Copy properties into footer

Paste these properties inside footer { }.
Save → Refresh browser → Observe footer becomes a neat “closing box”.

selectors.css

margin-top: 18px;
padding: 14px 16px;
border-top: 1px solid rgba(15,23,42,.10);
text-align: center;
background: #f1f5f9;
border-radius: 14px;

Step 3 (footer): HTML check (no change needed)

Open index.html and make sure you already have a <footer> element.
No need to add class/id—this is an element selector.
Refresh and confirm the footer section is styled.

<footer>
  <p>Practical 2.2 - CSS Selectors (External CSS Only)</p>
</footer>

Step 4 (code): Create the selector in CSS (type manually)

In selectors.css, type this selector below footer (no properties yet):

selectors.css

code {
}

Step 5 (code): Copy properties into code

Paste these properties inside code { }.
Save → Refresh browser.
Observe: semua inline code jadi lebih jelas (macam label kecil).

selectors.css

background: rgba(2,6,23,.06);
padding: 2px 6px;
border-radius: 8px;

Step 6 (code): HTML check (no change needed)

No need to add class/id. Any existing <code> will be styled automatically.
Confirm you can see multiple code labels inside instructions.

Step 7 (a): Create the selector in CSS (type manually)

In selectors.css, type these selectors below code (no properties yet):

selectors.css

a {
}

a:hover {
}

Step 8 (a): Copy properties into a and a:hover

Paste these properties into the correct selectors.
Save → Refresh browser.

selectors.css

/* (Optional) Link styling if you add any <a> later */
color: #2563eb;
text-decoration: none;

selectors.css

text-decoration: underline;

Step 9 (a): HTML demo (optional)

Kalau page awak belum ada link, tambah satu link ringkas untuk test.
Save HTML → Refresh → Hover link dan observe underline.

<footer>
  <p>Practical 2.2 - CSS Selectors (External CSS Only) | <a href="#">Back to top</a></p>
</footer>

Final Submission (must do):

Ensure both files exist: index.html, selectors.css
Run in browser (refresh) and check all sections visible.
Zip folder: RegNo_Practical2_2.zip

Recap (What you just applied)

Universal: * untuk baseline (box-sizing, font)
Element: body, h1, h2, p
Class: .panel, .note, .highlight
ID: #pageTitle, #practiceArea
Group: h3, .footerText, footer p
Descendant: .cards p, .selector-list li, .card-item h3