Lab Activity | Web Design Technologies

Class Flow

Build HTML targets → link external CSS → apply properties one by one → verify changes after each step.

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

Outcomes

Target

Apply core CSS properties correctly using external CSS
Differentiate margin vs padding, and common layout impacts
Use display/visibility and basic positioning safely

Setup

Tools

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

Rule of Thumb

Pro Tip

Make one change at a time → observe → keep notes
Use classes for styling reusable components
Keep CSS readable (spacing + comments)

IN-CLASS PRACTICAL 2B (Part 3) ACTIVITY

CSS Properties (External CSS File Only)

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

Pair / Small Group Allowed

Task 1 Warm-up

Create Folder + File

Goal: Create a clean workspace for practising CSS properties.

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 Properties</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 CSS Properties Practice (Paste Inside <body>)

Goal: Create targets for text, spacing, border, background, dimension, display/visibility, and positioning.

Student action (do this now):

Inside <body>...</body>, paste the HTML block below.
Save → Open in browser → Refresh.
Verify: you can see header, checklist, 3 demo boxes, and a mini layout area.

Paste this inside <body>

<header>
  <h1>CSS Properties Playground</h1>
  <p>We will practise text, spacing, border, background, dimension, display, and positioning properties using external CSS.</p>
</header>

<main>

  <section>
    <h2>Properties Checklist</h2>
    <ul>
      <li>Text & Font Properties</li>
      <li>Spacing (Margin & Padding)</li>
      <li>Border Properties</li>
      <li>Background Properties</li>
      <li>Dimension (Width / Height)</li>
      <li>Display & Visibility</li>
      <li>Positioning</li>
    </ul>
    <p>Tip: Make ONE change at a time, save, refresh, and observe the difference.</p>
  </section>

  <section>
    <h2>Demo Boxes</h2>

    <div class="box box-a">
      <h3>Box A: Text</h3>
      <p>This box is for font-size, font-weight, line-height, text-align, and colour.</p>
    </div>

    <div class="box box-b">
      <h3>Box B: Spacing + Border</h3>
      <p>This box is for margin, padding, border, and border-radius.</p>
    </div>

    <div class="box box-c">
      <h3>Box C: Background + Size</h3>
      <p>This box is for background-color, background-image (optional), width, and height.</p>
    </div>

  </section>

  <section>
    <h2>Mini Layout Area</h2>

    <div class="toolbar">
      <button class="btnx">Button 1</button>
      <button class="btnx">Button 2</button>
      <span class="badge">Badge</span>
    </div>

    <div class="float-area">
      <div class="chip chip-left">Left Chip</div>
      <div class="chip chip-right">Right Chip</div>
      <div class="clear"></div>
    </div>

    <p class="note">Next: create an external CSS file and apply properties step-by-step.</p>
  </section>

</main>

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

Suggested:

Jangan risau pasal cantik dulu—baseline dulu. Asalkan semua elemen keluar, lepas tu baru styling.

Task 4 External CSS

Create External File + Link It (selectors.css)

Goal: Create selectors.css and connect it to index.html. After this, all CSS properties 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:
body { font-family: Arial, Helvetica, sans-serif; background:#f8fafc; }
Save → Refresh browser.
If font + background changes, linkage is correct ✅

Suggested:

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

Task 5 Text & Font

Apply Text & Font Properties (selectors.css)

Goal: Tambah CSS untuk kawal rupa teks menggunakan font dan spacing.

Student action (do this now):

Open selectors.css.
Paste CSS code below at the bottom of the file.
Save → Refresh browser.

selectors.css (Task 5)

h1 {
  font-family: Arial, sans-serif;
  font-size: 32px;
  text-transform: uppercase;
}

p {
  line-height: 1.6;
  letter-spacing: 0.5px;
}

Verification (must do):

Title jadi lebih besar dan uppercase.
Perenggan lebih selesa dibaca.
Jika tiada perubahan, semak semula Task 4 (link CSS).

Suggested:

Amalkan letak font-family global dekat body, bukan ulang di setiap selector.

Task 6 Spacing

Apply Margin & Padding

Goal: Create breathing space using margin and padding.

Student action (do this now):

Paste CSS below.
Save → Refresh.
Observe: sections become spaced nicely.

selectors.css (Task 6)

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 18px;
}

section {
  margin: 18px 0;
}

ul {
  margin: 10px 0 14px;
  padding-left: 20px;
}

footer {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.12);
  text-align: center;
  color: #64748b;
}

Suggested:

Ingat: padding = ruang dalam box, margin = jarak luar box.

Task 7 Border

Apply Border + Border Radius

Goal: Turn Box A/B/C into card components using border and border-radius.

Student action (do this now):

Paste CSS below.
Save → Refresh.
Observe: all boxes now look like “cards”.

selectors.css (Task 7)

.box {
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
}

Suggested:

Cuba ubah border-radius ke 6px vs 18px, tengok mana nampak “lebih modern”.

Task 8 Background

Apply Background Properties

Goal: Differentiate Box A/B/C using background-color (soft tones).

Student action (do this now):

Paste CSS below.
Save → Refresh.
Observe: each box has a different background tone.

selectors.css (Task 8)

.box-a { background: rgba(13,110,253,.06); }
.box-b { background: rgba(32,201,151,.08); }
.box-c { background: rgba(255,193,7,.14); }

Suggested:

Untuk beginner, cukup dulu guna background-color. Gradient dan image boleh jadi Part 2.

Task 9 Dimension

Control Size (Width / Height)

Goal: Practise width, max-width, and min-height on the boxes.

Student action (do this now):

Paste CSS below.
Save → Refresh.
Observe: boxes keep consistent size even if text is short.

selectors.css (Task 9)

.box {
  max-width: 720px;
  min-height: 110px;
}

Suggested:

Bezakan fungsi: width rigid, max-width lebih flexible (responsive friendly).

Task 10 Display & Visibility

Display vs Visibility

Goal: Understand the difference between display:none and visibility:hidden.

Student action (do this now):

Paste CSS below.
Save → Refresh.
Observe: Badge disappears but space stays (visibility), then try display none.

selectors.css (Task 10)

.toolbar {
  border: 1px dashed rgba(15,23,42,.18);
  padding: 12px;
  border-radius: 12px;
}

.btnx {
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.18);
  background: white;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 8px;
}

.badge {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  display: inline-block;
}

/* Try 1: space remains */
.badge {
  visibility: hidden;
}

/* Try 2: remove element + space (uncomment below, comment visibility above) */
/* .badge { display: none; } */

Suggested:

Untuk demo dalam kelas: buat Try 1 dulu, then swap ke Try 2.

Task 11 Positioning

Relative vs Absolute (Safe Demo)

Goal: Apply position: relative on a container and position: absolute on a child element.

Student action (do this now):

Paste CSS below.
Save → Refresh.
Observe: one chip “floats” top-right inside the area.

selectors.css (Task 11)

.float-area {
  margin-top: 14px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 16px;
  min-height: 90px;
  position: relative; /* key: parent reference */
  background: rgba(108,117,125,.06);
}

.chip {
  padding: 8px 10px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid rgba(15,23,42,.18);
  background: white;
}

.chip-left {
  position: relative;
  top: 6px;
  left: 6px;
}

.chip-right {
  position: absolute;
  top: 12px;
  right: 12px;
}

Suggested:

Tekankan dalam kelas: absolute akan cari parent yang relative. Kalau tak, dia ikut browser window.

Task 12 Colour Values

HEX, RGB, RGBA, HSL

Goal: Faham format nilai warna dalam CSS dan beza colour vs opacity (RGBA), sambil nampak effect secara praktikal pada page.

Student action (do this now):

Paste CSS di bawah pada hujung selectors.css.
Save → Refresh.
Observe: setiap section guna format warna berbeza (HEX / RGB / RGBA / HSL).

selectors.css (Task 12)

/* Task 12: Colour Values (HEX, RGB, RGBA, HSL) */

/* 1) HEX: solid colour (most common) */
header {
  background: #0f172a;
  color: #ffffff;
  padding: 18px;
  border-radius: 14px;
}

/* 2) RGB: 0–255 per channel */
section h2 {
  color: rgb(15, 23, 42);
}

/* 3) RGBA: same as RGB + alpha (opacity 0–1) */
.box {
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.box-a {
  background: rgba(59, 130, 246, .10); /* soft blue */
}

.box-b {
  background: rgba(249, 115, 22, .10); /* soft orange */
}

.box-c {
  background: rgba(34, 197, 94, .10);  /* soft green */
}

/* 4) HSL: best for “tuning” tone (hue/saturation/lightness) */
.toolbar .badge {
  background: hsl(216, 90%, 56%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-block;
}

/* Bonus: make hover feel clean */
.btnx {
  transition: .15s;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 10px;
  padding: 8px 12px;
}

.btnx:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

Suggested:

Cuba tukar alpha RGBA daripada .10 ke .25 untuk nampak perbezaan opacity. Lepas tu cuba tweak HSL lightness (contoh 56% → 46%) untuk tone yang lebih “deep”.

Task 13 CSS Units

px, rem, em, %, vw/vh

Goal: Faham macam mana unit “scale” ikut root, parent, atau viewport supaya design lebih konsisten dan responsive.

Student action (do this now):

Paste CSS di bawah pada hujung selectors.css.
Save → Refresh.
Observe: font size berubah ikut unit, dan width box ikut % vs vw.

selectors.css (Task 13)

/* Task 13: Units used in CSS values */

/* Base size (root). rem will follow this */
html {
  font-size: 16px;
}

/* Container for unit demo (you can attach to any section) */
.unit-demo {
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 14px;
  padding: 14px;
  background: rgba(15, 23, 42, .03);
}

/* Font units */
.unit-px { font-size: 18px; }     /* absolute-ish */
.unit-rem { font-size: 1.2rem; }  /* follows root */
.unit-em  { font-size: 1.2em; }   /* follows parent */

/* Width units */
.unit-wrap {
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.unit-percent {
  width: 70%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(220, 38, 38, .08);
}

.unit-vw {
  width: 45vw;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(59, 130, 246, .08);
}

/* tiny bar to visualise width */
.bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(220, 38, 38, .75);
}

/* vw bar */
.bar-vw > span {
  background: rgba(59, 130, 246, .75);
}

Suggested:

Cuba tukar html { font-size: 16px; } jadi 18px. Nanti tengok effect dekat rem — dia akan berubah, tapi px kekal. Lepas tu resize browser dan perhatikan vw memang ikut viewport.