Lab Activity | Web Design Technologies

Class Flow

Follow this sequence to clearly see the transition from plain content → styled layout.

1) The Evolution 2) Implementation 3) The Linkage 4) Verification

Outcomes

Target

Identify syntax differences (Inline, Internal, External)
Apply CSS properties to text, colours, and basic layout
Select an appropriate method based on requirements

Setup

Tools

VS Code / Notepad++
Chrome / Edge / Firefox
Start with a new index.html (this practical)

Confidence Level

100%

Industry-aligned practice
External CSS as best practice (SoC)
Clear verification checkpoints

IN-CLASS PRACTICAL 2B (Part 1) ACTIVITY

Inline → Internal → External (Complete Step-by-Step)

Complete one task → save → refresh → verify output.

Pair / Small Group Allowed

Task 1 Warm-up

Create Folder + File

Goal: Create a clean workspace for Practical 2.2 (Part 1).

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 quickly using Emmet (!) without adding any body content yet.

Student action (do this now):

Open index.html in VS Code.
Make sure the file extension is .html.
Inside the empty file, type !
Press Tab or Enter.
VS Code will auto-generate the HTML skeleton.
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 Methods</title>
</head>
<body>

</body>
</html>

Suggested:

If ! does not expand, check that:

You are using VS Code (Emmet is enabled by default).
The file is saved as index.html.
Try Ctrl + Space → select Emmet: Expand Abbreviation.

Task 3 Warm-up

Add Body Content (3 Headings: h1, h2, h3)

Goal: Prepare meaningful elements so CSS changes are obvious (headings, paragraph, links, list, ordered list, and footer).

Student action (do this now):

Inside <body>...</body>, paste the content block below.
Save → Refresh browser.
Verify: You can see headings (h1, h2, h3), lists (ul, ol), and links.

Paste this inside <body>

<header>
  <h1>My Web Page</h1>
</header>

<main>
  <h2>Internal CSS Section</h2>
  <ul>
    <li>HTML Structure</li>
    <li>CSS Basics</li>
    <li>Page Styling</li>
  </ul>

  <h3>External CSS Section</h3>
  <table border="1">
    <tr>
      <th>Week</th>
      <th>Topic</th>
    </tr>
    <tr>
      <td>1</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>2</td>
      <td>CSS</td>
    </tr>
  </table>
</main>

<footer>
  <p>Simple CSS Practice</p>
</footer>

Suggested:

Keep the browser open. After every task: save the file, refresh the browser, and confirm the changes visually.

Task 4 Warm-up

Run in Browser (Baseline Check)

Goal: Confirm that the HTML is correct before styling.

Student action (do this now):

Right-click index.html → Open with → Chrome / Edge / Firefox
Confirm the page title: Practical 2.2 - CSS Methods
Confirm you can see headings, lists, and links.

Suggested:

Use Ctrl + R (Refresh). If something disappears, check your closing tags.

Task 5 Inline CSS

Inline CSS (Replace Header Block)

Goal: Apply inline CSS by replacing the entire <header> block. This avoids syntax mistakes and makes the inline effect clear on a single element (<h1>).

Student action (do this now):

Find this code in your HTML file:
<header> ... </header>
Delete the old header completely.
Copy and paste the code below.
Save the file → Refresh browser.
Verify: Only the page title (<h1>) is styled.

Copy & replace your <header> block with this

<header>
  <h1 style="color: dodgerblue; text-align: center; letter-spacing: 1px;">
    My Web Page
  </h1>
</header>

Suggested:

Inline CSS is best used for quick testing or small changes. In real projects, this styling should be moved to internal or external CSS.

Task 6 Internal CSS

Internal CSS (Style the Main Section)

Goal: Use Internal CSS to style the content inside the <main> section (target: <h2> and the list). This shows how one style block can control multiple elements at once.

Student action (do this now):

Scroll to the top of your file and locate the <head> section.
Find the closing tag: </head>.
Paste the CSS code below just before </head>.
Make sure the code is wrapped inside <style>...</style>.
Save the file → Refresh browser.
Verify: The <h2> and list inside <main> are now styled.

Paste this inside <head> (before </head>)

<style>
  main {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.15);
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;
  }

  h2 {
    color: crimson;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  ul {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 10px;
    padding: 12px 18px;
    list-style-type: square;
  }

  li {
    margin: 6px 0;
  }
</style>

Suggested:

Internal CSS is suitable when styling only one page. In the next task, you will move these styles to an external file.

Task 7 External CSS

External CSS (Style Table & Footer)

Goal: Use an external CSS file to style the <h3>, table, and footer. This demonstrates professional practice: separating content (HTML) from presentation (CSS).

Student action (do this now):

Create a new file in the same folder as index.html.
Name the file style.css.
Copy and paste the CSS code below into style.css.
Save style.css.
Go back to index.html.
Inside the <head>, add the link tag shown below.
Save → Refresh browser.
Verify: The table, <h3>, and footer are now styled.

index.html (inside <head>)

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

style.css (external file)

/* External CSS: h3, table, footer */

h3 {
  color: #2563eb;
  margin-top: 20px;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.25);
  margin-bottom: 16px;
}

th, td {
  border: 1px solid rgba(15,23,42,.25);
  padding: 10px;
  text-align: left;
}

th {
  background: #e0f2fe;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #f8fafc;
}

footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.25);
  font-size: 0.9rem;
  color: #475569;
}

Verification step (must do):

In style.css, change the th background colour to lightyellow.
Save style.css → Refresh browser.
If the table header changes colour, it confirms that style.css is correctly linked to index.html. ✅

Suggested:

External CSS is the recommended method for real projects because one file can style many pages consistently.

Checkpoint (Stop Here)

Before you proceed, verify your results with your partner.

Checkpoint

Checklist:

Checklist	Expected Result
Inline Check	`<h1>` is centred and coloured (inline style applied).
Lists + Links Styled	`ul`, `ol`, and links look different (padding, borders, link colour).
External Link	Changing CSS in `style.css` updates the page after refresh.
File Structure	`index.html` and `style.css` are in the same folder level.

Common Pitfalls (Quick Fix):

CSS syntax: missing : or ; inside rules.
Wrong file name: style.css vs styles.css.
Browser cache: use hard refresh Ctrl + Shift + R.
Specificity: inline style overrides internal/external on the same element.

Scholarly note (student-friendly):

External CSS supports Separation of Concerns (SoC), improves maintainability, and reduces duplication when multiple pages share the same design.

↑ Back to Top