LAB 3 OF 12 · EX.3 UNIT 1 · WEB BASICS, HTML & CSS 2-HOUR LAB SESSION · UNIT 1 FINALE

Today the makeover is completed

The full stylesheet — poshtik-campus/ leaves Unit 1 finished.

Lab 1 built the three pages. Lab 2 grew menu.html until it carried a real order form, then committed and pushed it. Those pages are still plain — no stylesheet, no photos, the dishes a bare list of names.

Today, picking up exactly where Lab 2 left off, you finish the job with your own hands: give all three pages their semantic skeletons, turn the dish list into ten photo cards, start style.css, style the nav, style the menu and its order form, verify every fix on your crack log, and push the commit that closes Unit 1. Same folder. Same repo. No fresh start — ever.

R-23 SYLLABUS · FSWD LAB · PROGRAMMING EXERCISE 3 · WORD FOR WORD

“Apply CSS to the Static Web Site.”

Walk out of this lab able to…

Take a plain HTML site to a finished, branded, phone-ready site with one external stylesheet

Turn your Class-11 crack log into fixes — every logged crack verified closed in the browser

Answer four real exam questions on CSS — internal, external, cascading, even @media print

Close Unit 1 the professional way: clean commits, a pushed repo, and a revision map of everything built

THE LAB, POINT BY POINT

01Warm-up — today's promise: the makeover gets finished, and pushedIDEA

02Prelab Q1–Q3 (guided) + Q4–Q5 on your own — selectors, @media, box modelGUIDED

03Prelab programs 1–4 — four tiny warm-up files, each with its renderWARM-UP

04Folder continued — same poshtik-campus/, plus the index.html semantic surgeryRITUAL

05Upgrade menu.html and about.html, add the photos, start style.cssBUILD

06Exercise 1 — style the header and the nav (problem, then solution + live preview)BUILD

07Exercise 2 — style the menu dishes and the order formBUILD

08PYQ · P1·Q11a · 4+4m — claim form with internal CSSEXAM

09PYQ · P2·Q16a · 4m — profile page in a specified fontEXAM

10PYQ · P4·Q11b · 4m — @media print: the one genuinely new fact todayEXAM

11PYQ · P3·Q11b · 4m — cascading, external CSS, a form and a logo backgroundEXAM

12Crack-log verification — every Class-11 crack, checked closed, phone strip includedVERIFY

13Commit and push — the Unit-1 closing commit on your repoGIT

14Your folder after today — the final 4-file map, and which lab built whatIDEA

15Close — Unit 1 recap, exam strategy, and the bridge into JavaScriptRECAP

Your starting point is where Lab 2 left off — and if you're behind, today's rescue pack catches you up completely.

Your input is your own poshtik-campus/ folder — exactly where Lab 2 left it: three pages, menu.html carrying the order form, and the commits "First version of Poshtik Campus site" (Lab 1's exit) and "Add order form to menu" (Lab 2's exit) — plus your crack log on paper. No style.css and no images/ yet: Part 5 adds both. If your folder is behind — missed a session, machine changed — the catch-up ladder is strict, in this order: (1) if you ever pushed, git clone your own repo — your real work beats any handout; (2) if only Lab 2's order form is missing, rebuild it from Lab 2's solution sheet before Part 5; (3) only for a genuine emergency — machine died with no push, or an excused absence — the Lab-3 rescue pack below restores Lab 2's three finished pages, the logo and all ten dish photos — you still type Parts 4 and 5 yourself. Ask your instructor before using it, and read its README first.

How to use the pack — five steps, zero guessing: ① press the ZIP button below and unzip it anywhere; ② copy everything inside the unzipped poshtik-campus-rescue\ folder into a new folder Desktop\poshtik-campus\ — keep the images\ folder inside it as-is; ③ check the images\ folder holds the logo and ten dish photos; ④ open menu.html in the browser — a plain page: the ten dishes as a list, the "Order Here" form, then the Home / About us links; ⑤ run the three git commands printed in README-FIRST.txt (one honest "caught up here" commit). The pack restores files, not skills — the sessions you missed still owe you their practice, in Learning Mode, this week.

Prefer single files? README-FIRST.txt · index.html · menu.html · about.html · logo — the ten dish photos ship inside the ZIP.

The exact starting line — check before you begin.

Your folder holds exactly three pages — index.html, menu.html, about.html — and menu.html ends with the Order Here form. Run git log --oneline — the top line should read Lab 2's exit commit, "Add order form to menu" — the hand-off this lab picks up. If that's your log, you're standing exactly where this lab starts.

PRELAB Q1 · GUIDED — WE REASON TOGETHER

Write a class-selector rule: every dish card gets its mint background.

Today's build leans on one selector more than any other. Warm it up: write the rule that gives every element carrying class="dish" a mintcream background — and say out loud what the dot means.

both real files — menu.html (the target) + style.css (the answer)ONE PRESS AT A TIME · skeleton shown dim
1<!-- menu.html — the file the rule has to reach -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="style.css">  <!-- THIS is what connects the two files -->
7</head>
8<body>
9  <article class="dish">Ragi Idli — ₹30</article>
10  <article class="dish">Ragi Dosa — ₹40</article>
11</body>
12</html>
·· 
··/* style.css — the sheet every page links; those <article class="dish"> cards are the target */
··.dish  /* the DOT reads: "anything whose class is…" */
··{
··  background-color: mintcream;
··}

Poshtik Campus — Menu

file:///C:/Users/student/Desktop/poshtik-campus/menu.html

Ragi Idli
Steamed, light, ₹30

Ragi Dosa
Crisp, iron-rich, ₹40

One rule, every card. The dot selector doesn't count elements — write it once and two cards, or twenty, obey. That leverage is why the exam loves class selectors, and why today's Ex.2 styles ten dishes with six lines.

The transferable move:

.dish selects by role, #page-header selects by identity (one only), h3 selects by species. Today's stylesheet uses all three — every time you write a selector today, name which of the three you reached for and why.

PRELAB Q2 · GUIDED

Write the @media skeleton for phones — from memory, punctuation and all.

The stylesheet's own last block, rebuilt from memory. Write the empty shell that says: "the rules inside apply only when the window is 600px or narrower." Every character carries a mark in the exam.

the answer · the shell, appended at the BOTTOM of poshtik-campus\style.cssONE PRESS AT A TIME
1<!-- menu.html — without line 4 the phone LIES about its width and @media never fires -->
2<head>
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <link rel="stylesheet" href="style.css">
6</head>
·· 
··/* style.css — append below the last existing rule */
··@media (max-width: 600px)
··{
··  /* phone-only rules live here */
··}

read it back — four checkpoints

the sentence hiding in the syntax

@media — "dear browser, a condition follows." The @ makes it a rule about rules, not a selector.

(max-width: 600px) — "…true when the window is at most 600px." Parentheses required; a colon, not an equals.

{ … } — a second layer of braces. Whole rules go inside, each with braces of its own — the classic lost mark is closing the outer brace too early.

Say the sentence, then write the symbols. "When the window is 600px or less, also apply these." If you can say it, the punctuation writes itself — and P4·Q11b this afternoon swaps just one word into this shell: print.

PRELAB Q3 · GUIDED — THE LAST ONE TOGETHER

Margin vs padding — point to the difference on a real card.

Both are "space", both take pixels, and mixing them up is this project's most-logged crack. One sentence each — then look at a real card where both are switched on.

the answer · two sentences, then the style.css rule they describeONE PRESS AT A TIME
··/* style.css — both spaces act on menu.html's <article class="dish"> cards */
··/* PADDING: space INSIDE the border — the card's own breathing room */
··/* MARGIN: space OUTSIDE the border — the gap it keeps from neighbours */
··.dish
··{
··  padding: 12px;   /* text stands back from the border */
··  margin: 12px 0;  /* cards stand back from each other */
··}

both spaces, made visible

file:///C:/Users/student/Desktop/poshtik-campus/menu.html

Ragi Idli — ₹30

green tint = padding (inside the seagreen border) · orange tint = margin (outside it, pushing neighbours away)

The border is the frontier. Inside it: padding. Outside it: margin. When a card's background colour reaches all the way to its border, that stretch is padding at work — background paints padding, never margin.

WATCH IT BUILD · PLAIN CARD FIRST, THEN EACH RULE LIVE

The whole `.dish` rule, one line at a time — see each property land.

This is the exact rule you'll write for real in Ex.2 this afternoon. Here it arrives one property per press on a live card, so you never wonder what each line did. Plain, unstyled card first — then background, then border, then padding, then rounded corners. Watch the same card change under your hands.

poshtik-campus\style.css — applied live to the card on the rightONE PRESS = ONE PROPERTY
··/* menu.html's <article class="dish"> card is already on screen, plain */
1.dish {
2  background-color: mintcream;   /* fill */
3  border: 2px solid seagreen;   /* frame */
4  padding: 12px 14px;         /* inner room */
5  border-radius: 8px;           /* soft corners */
6}

THIS OUTPUT IS REAL — PLAIN CARD FIRST, THEN EACH RULE

file:///C:/Users/student/Desktop/poshtik-campus/menu.html

Ragi Idli
Steamed, light — ₹30

Before any press: a plain card, no fill, no frame — raw HTML. Each press adds exactly the property on that code line. Press Back to peel a property off again.

Five lines, five decisions. Fill, frame, breathing-room, corners — that is the entire vocabulary of a card. Every one of the ten dishes in Ex.2 obeys this same rule because they all carry class="dish": write it once, style them all.

PRELAB Q4–Q5 · NOW ON YOUR OWN

Two questions, answered by you first. Then the sheet.

Q4. Name the three ways CSS can attach to a page, and state — with one reason — which of the three poshtik-campus/ uses for its site-wide look.

Q5. body { color: black; } and h1, h3 { color: seagreen; } both apply to a dish's <h3>. Which colour wins, and what is the one-word name of the mechanism that decides?

YOUR TWO ANSWERS — WRITE BEFORE PEEKING

Both answers written? Only then.

SOLUTION SHEET · Q4–Q5

Q4 · Three attachments, one winner

Inline (a style= attribute — one element), internal (a <style> block in the head — one page), external (a linked .css file — the whole site). Poshtik uses external: one style.css, three pages, so a brand change is a one-file edit. The exam asks this exact classification twice today — P1·Q11a wants internal, P3·Q11b wants external.

Q5 · Seagreen wins — the cascade

The h3 gets seagreen. body's black arrives only by inheritance — a default handed down; h1, h3 selects the element directly, and a direct rule always beats an inherited one. The one-word mechanism: the cascade — CSS's referee. You'll write this as an exam sentence in Part 11.

Score yourself honestly

Q4 named all three and picked external with a "one file, many pages" reason — full marks. Naming two of three: revise the three ways to attach CSS tonight.
Q5 said seagreen and the word "cascade" (or "specificity — direct beats inherited") — full marks. Guessed black? The fix is one idea: inheritance is a default, not a command.

PRELAB PROGRAMS 1–4 · WARM-UPS, NOT A TEST

Four tiny files, four CSS moves. Type first, then look.

Each warm-up rehearses one move today's build uses at full scale. All four live in your fswd-practice\lab-03\ sandbox — never in the repo. Answers sit right below each one, because a warm-up you can't check isn't a warm-up.

Program 1 · the class selector: in css-warmup-1.html, three list items carry class="special"-style markup: give all three dish names the brand green with one rule, using an internal <style> block.

css-warmup-1.html · head + body coreONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>CSS Warm-up 1</title>
6  <style>
7    .special
8    {
9      color: seagreen;
10    }
11  </style>
12</head>
13<body>
14  <ul>
15    <li class="special">Ragi Idli</li>
16    <li>Plain Rice</li>
17    <li class="special">Millet Shake</li>
18    <li class="special">Pesarattu</li>
19  </ul>
20</body>
21</html>

CSS warm-up 1

file:///C:/Users/student/Desktop/fswd-practice/lab-03/css-warmup-1.html

Ragi Idli
Plain Rice
Millet Shake
Pesarattu

Three green, one black — and that's the proof. Plain Rice has no class, so the rule walks past it. The selector chose by role, not by position. One rule, any number of members.

Program 2 · the id selector: in css-warmup-2.html, a page has one main heading with id="main-title". Centre it and colour it darkslategray — selecting by id.

css-warmup-2.html · the rule + the one element it can ever matchONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>CSS Warm-up 2</title>
6  <style>
7    #main-title  /* # reads: "THE element whose id is…" */
8    {
9      text-align: center;
10      color: darkslategray;
11    }
12  </style>
13</head>
14<body>
15  <h1 id="main-title">Poshtik Campus</h1>
16</body>
17</html>

CSS warm-up 2

file:///C:/Users/student/Desktop/fswd-practice/lab-03/css-warmup-2.html

Poshtik Campus

One # matches one element — an id must be unique on its page. Class = uniform worn by many; id = name tag worn by one. Ex.1 uses exactly this selector on the site's real #page-header.

Program 3 · the box model, felt: in css-warmup-3.html, one div with a border. Add padding: 20px and watch the text step back from the wall — no layout theory, just the effect.

css-warmup-3.html · one box, before and afterONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>CSS Warm-up 3</title>
6  <style>
7    .box
8    {
9      border: 2px solid seagreen;
10      padding: 20px;  /* the line that changes everything */
11    }
12  </style>
13</head>
14<body>
15  <div class="box">Text glued to the wall — cramped.</div>
16</body>
17</html>

CSS warm-up 3

file:///C:/Users/student/Desktop/fswd-practice/lab-03/css-warmup-3.html

BEFORE — border only:

Text glued to the wall — cramped.

AFTER — padding: 20px:

Same text, breathing. That 20px of calm is padding.

Both boxes are the same HTML. One property separates cramped from calm. Every .dish card on the real site owes its comfort to line 24 of your style.css: padding: 12px;.

Program 4 · @media flips a property: in css-warmup-4.html, a paragraph reading "You are on a small screen" is hidden by default (display: none) — and a media query shows it only at 600px or less. Save, open, drag the window edge.

css-warmup-4.html · the flipONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- real phones need this -->
5  <title>CSS Warm-up 4</title>
6  <style>
7    #phone-msg
8    {
9      display: none;  /* default: invisible */
10    }
11    @media (max-width: 600px)
12    {
13      #phone-msg
14      {
15        display: block;  /* narrow window: appear */
16      }
17    }
18  </style>
19</head>
20<body>
21  <p id="phone-msg">You are on a small screen</p>
22</body>
23</html>

THIS OUTPUT IS REAL — PRESS THE TWO WIDTH BUTTONS AND WATCH THE FLIP

CSS warm-up 4

file:///C:/Users/student/Desktop/fswd-practice/lab-03/css-warmup-4.html

Poshtik Campus — welcome.

A real @media, not a picture of one. The two buttons resize the mini-window; at 480px the query condition turns true and the paragraph appears — no HTML changed, no reload. On your own file, dragging the browser edge past 600px does the identical flip.

Why this exact drill?

It proves the deepest fact about media queries: they run continuously, not once at load. The browser re-checks the condition on every resize. Part 12's crack-log verification leans on this — you'll drag one window edge and watch three fixes engage at once.

SAME FOLDER, SAME REPO — THE THIRD AND FINAL LAB ON THIS PROJECT

Open poshtik-campus. After today, this project graduates to Unit 2.

Lab 1 built the pages. Lab 2 taught them to listen. Today — the third and final lab on this project inside Unit 1 — finishes the look. The folder does not retire afterwards: Lab 4 adds script.js to this very folder and the site starts to think. No fork, no fresh start. Same repo, next unit.

1

Open the folder in VS Code

File menu, Open Folder, poshtik-campus. The Explorer shows exactly three files — index.html, menu.html, about.html — your Lab-1 and Lab-2 pages. No style.css and no images/ folder yet: both arrive in Part 5.

2

Run the starting-line check

git log --oneline in the terminal. Top line: Lab 2's "Add order form to menu". If yes — you're current. If not — Part 1's catch-up ladder, now: clone your own repo first; the rescue pack is the last rung, instructor's call.

3

Editor left, browser right

Open all three pages in browser tabs. Today's rhythm: edit one css file, reload three tabs, watch them all obey. That is the whole argument for an external stylesheet, felt rather than recited.

FIRST SURGERY · THE DEBT LAB 1 LEFT BEHIND

Before any styling: index.html gets its semantic skeleton.

Lab 1 left index.html as a heading, a paragraph and a bare list of links — honest work for a first page, but it does not name its parts. Today's opening move re-homes that content into <header>, <nav>, <main> and <footer>, adds the logo, and links the stylesheet. The payoff lands in Part 5: the moment style.css exists, rules that say #page-header, nav a and footer p find these tags with no extra markup.

index.html · the complete file — 37 linesONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Poshtik Campus — Home</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10
11  <!-- Semantic surgery done in Lab 3 Part 4: the moment <nav> and <footer>
12       existed, style.css's "nav a" and "footer p" rules snapped on for free. -->
13  <header id="page-header">
14    <img src="images/poshtik-campus-logo.jpg" alt="Poshtik Campus logo" width="90">
15    <h1>Poshtik Campus</h1>
16    <p>Healthy food, made on campus</p>
17  </header>
18
19  <nav>
20    <a href="index.html">Home</a>
21    <a href="menu.html">Menu</a>
22    <a href="about.html">About</a>
23  </nav>
24
25  <main>
26    <h2>Welcome</h2>
27    <p>Healthy Telangana &amp; Andhra staples at student prices &mdash;
28       millets, sprouts and protein bowls, made fresh on campus.</p>
29    <p>Hungry? <a href="menu.html">See today's healthy ten</a>.</p>
30  </main>
31
32  <footer>
33    <p>Poshtik Campus &middot; Vasavi College of Engineering</p>
34  </footer>
35
36</body>
37</html>

Poshtik Campus — Home

file:///C:/Users/student/Desktop/poshtik-campus/index.html

Poshtik Campus logo Poshtik Campus

Healthy food, made on campus

Home Menu About

Welcome

Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.

Hungry? See today's healthy ten.

Poshtik Campus · Vasavi College of Engineering

Plain on purpose — for now. The logo shows only its alt text because images/ does not exist yet, and no colour appears because style.css does not either. Part 5 adds both, and its #page-header, nav a and footer p rules find these named tags straight away.

WHERE EXACTLY THE SURGERY HAPPENS

FILEposhtik-campus\index.html — this file only; menu.html and about.html get the same skeleton in Part 5

WHAT<head> gains the stylesheet link at line 7; the body becomes <header id="page-header"> with logo, h1 and tagline (lines 13–17), <nav> with three bare <a> links, Home now included (19–23), <main> with a Welcome heading, the welcome paragraph and a link to the menu (25–30), and <footer> (32–34)

DELETE?only the old <ul>/<li> wrappers and their comment — the welcome paragraph moves into <main>, it does not leave the file

CHECKthe file is 37 lines, ending </html>; the logo shows only its alt text until Part 5 creates images\ — expected

TODAY'S WORKING FILES

FOLDERposhtik-campus — the same repo since Lab 1

FILESindex.html (surgery, just done) · menu.html, about.html, images/, style.css (Part 5) · style.css grows again in Ex.1 and Ex.2

SANDBOXfswd-practice\lab-03\ — warm-ups and all four PYQ files live here, never in the repo

GIT?yes — the surgery earns its own commit now ("Give index.html its semantic skeleton"); Part 5 adds two more

Missed a lab, or on a fresh machine?

git clone https://github.com/<your-username>/poshtik-campus.git puts you exactly where everyone else stands — every lab since Lab 1 has been building this insurance.

SECOND SURGERY · THE OTHER TWO PAGES CATCH UP

Upgrade menu.html and about.html, add the photos, start style.css.

Four moves bring the other two pages level with index.html: a photo folder, two rebuilt pages, and the stylesheet Ex.1 and Ex.2 grow.

Move 1 · the photo folder

WHERE EXACTLY THIS GOES — FOLLOW LIKE A RECIPE

FILEa new folder poshtik-campus\images\, beside the three pages

FINDthe photos ship in the Part 1 ZIP — download it, unzip, and take only its images\ folder

INSERTthat whole folder, eleven files: poshtik-campus-logo.jpg jonna-rotte-wrap.png sajja-roti-wrap.png ragi-sangati-bowl.png ragi-idli-bowl.jpg pesarattu-with-sprouts.jpg ulava-charu-protein-bowl.jpg gongura-sprouts-salad.jpg sprouts-moong-chilla.jpg paneer-protein-bowl.jpg millet-protein-shake.jpg

NEVERrename a photo or drop it loose beside the pages — src="images/…" needs these exact names

CHECK11 files in images; index.html now shows the logo

Move 2 · menu.html — ten list items become ten photo cards

The list becomes ten <article class="dish"> cards, each the same 6-line pattern (lines 30–35 is card one): only photo, name, description and price change. The order form (100–135) is unchanged, now inside <main>.

WHERE EXACTLY THIS GOES — FOLLOW LIKE A RECIPE

FILEposhtik-campus\menu.html

FINDthe whole file — Lab 2's heading, intro line, ten-item list and order form

INSERTlink (7), header (14–18), nav (20–24), <main> with h2, cards and form (26–137), footer (139–141)

NEVERretype the form — cut it with its <h2> and paste at line 100

CHECK144 lines; open the page — ten photos, no broken-image icons

menu.html · the complete file — 144 linesONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poshtik Campus — Menu</title>
<link rel="stylesheet" href="style.css">
8</head>
9<!-- menu.html · Poshtik Campus menu page.
   The dish cards and the order form live inside <main> below.
   Photos come from the images folder; the look comes from style.css. -->
12<body>
13
<header id="page-header">
  <img src="images/poshtik-campus-logo.jpg" alt="Poshtik Campus logo" width="90">
  <h1>Poshtik Campus Menu</h1>
  <p>Healthy Food, Healthy Body, Healthy Mind</p>
</header>
19
<nav>
  <a href="index.html">Home</a>
  <a href="menu.html">Menu</a>
  <a href="about.html">About</a>
</nav>
25
<main>
27
  <h2>Today's Healthy Ten</h2>
29
  <article class="dish">
    <img src="images/jonna-rotte-wrap.png" alt="Jonna rotte wrap filled with vegetables" width="180">
    <h3>Jonna Rotte Wrap</h3>
    <p>Telangana sorghum-flatbread wrap, loaded with crunchy vegetables.</p>
    <p>Price: Rs. 60</p>
  </article>
36
  <article class="dish">
    <img src="images/sajja-roti-wrap.png" alt="Sajja roti wrap with fresh filling" width="180">
    <h3>Sajja Roti Wrap</h3>
    <p>Pearl-millet flatbread wrap — dense, warm, and filling.</p>
    <p>Price: Rs. 60</p>
  </article>
43
  <article class="dish">
    <img src="images/ragi-sangati-bowl.png" alt="Ragi sangati bowl served hot" width="180">
    <h3>Ragi Sangati Bowl</h3>
    <p>Classic Telangana finger-millet mudde bowl, served hot.</p>
    <p>Price: Rs. 55</p>
  </article>
50
  <article class="dish">
    <img src="images/ragi-idli-bowl.jpg" alt="Bowl of soft ragi idlis" width="180">
    <h3>Ragi Idli Bowl</h3>
    <p>Soft steamed finger-millet idlis with chutney.</p>
    <p>Price: Rs. 50</p>
  </article>
57
  <article class="dish">
    <img src="images/pesarattu-with-sprouts.jpg" alt="Pesarattu dosa topped with sprouts" width="180">
    <h3>Pesarattu with Sprouts</h3>
    <p>Andhra green-gram dosa, topped with fresh sprouts.</p>
    <p>Price: Rs. 55</p>
  </article>
64
  <article class="dish">
    <img src="images/ulava-charu-protein-bowl.jpg" alt="Ulava charu protein bowl" width="180">
    <h3>Ulava Charu Protein Bowl</h3>
    <p>Telangana horse-gram stew over a protein-rich grain bowl.</p>
    <p>Price: Rs. 70</p>
  </article>
71
  <article class="dish">
    <img src="images/gongura-sprouts-salad.jpg" alt="Gongura sprouts salad" width="180">
    <h3>Gongura Sprouts Salad</h3>
    <p>Tangy Andhra gongura leaves tossed with mixed sprouts.</p>
    <p>Price: Rs. 45</p>
  </article>
78
  <article class="dish">
    <img src="images/sprouts-moong-chilla.jpg" alt="Sprouts moong chilla on a plate" width="180">
    <h3>Sprouts Moong Chilla</h3>
    <p>Savoury moong pancake studded with sprouts.</p>
    <p>Price: Rs. 50</p>
  </article>
85
  <article class="dish">
    <img src="images/paneer-protein-bowl.jpg" alt="Paneer protein bowl" width="180">
    <h3>Paneer Protein Bowl</h3>
    <p>Grilled paneer cubes over greens and grains.</p>
    <p>Price: Rs. 80</p>
  </article>
92
  <article class="dish">
    <img src="images/millet-protein-shake.jpg" alt="Glass of millet protein shake" width="180">
    <h3>Millet Protein Shake</h3>
    <p>Cold millet-and-jaggery protein shake.</p>
    <p>Price: Rs. 40</p>
  </article>
99
  <h2>Order Here</h2>
101
  <form>
    <p>
      <label for="cust-name">Your name</label><br>
      <input type="text" id="cust-name" name="cust-name">
    </p>
    <p>
      <label for="cust-phone">Phone number</label><br>
      <input type="tel" id="cust-phone" name="cust-phone">
    </p>
    <fieldset>
      <legend>Pick your dish</legend>
      <label><input type="radio" name="dish" value="jonna-rotte-wrap"> Jonna Rotte Wrap</label><br>
      <label><input type="radio" name="dish" value="sajja-roti-wrap"> Sajja Roti Wrap</label><br>
      <label><input type="radio" name="dish" value="ragi-sangati-bowl"> Ragi Sangati Bowl</label><br>
      <label><input type="radio" name="dish" value="ragi-idli-bowl"> Ragi Idli Bowl</label><br>
      <label><input type="radio" name="dish" value="pesarattu-with-sprouts"> Pesarattu with Sprouts</label><br>
      <label><input type="radio" name="dish" value="ulava-charu-protein-bowl"> Ulava Charu Protein Bowl</label><br>
      <label><input type="radio" name="dish" value="gongura-sprouts-salad"> Gongura Sprouts Salad</label><br>
      <label><input type="radio" name="dish" value="sprouts-moong-chilla"> Sprouts Moong Chilla</label><br>
      <label><input type="radio" name="dish" value="paneer-protein-bowl"> Paneer Protein Bowl</label><br>
      <label><input type="radio" name="dish" value="millet-protein-shake"> Millet Protein Shake</label>
    </fieldset>
    <p>
      <label for="qty">Quantity</label><br>
      <input type="number" id="qty" name="qty" min="1" max="10" value="1">
    </p>
    <p>
      <label for="notes">Notes for the kitchen</label><br>
      <textarea id="notes" name="notes" rows="3" cols="40"></textarea>
    </p>
    <p>
      <button type="submit">Place order</button>
    </p>
  </form>
136
</main>
138
<footer>
  <p>&copy; 2026 Poshtik Campus &middot; orders@poshtikcampus.in</p>
</footer>
142
143</body>
144</html>

Move 3 · about.html — the same skeleton, shorter

WHERE EXACTLY THIS GOES — FOLLOW LIKE A RECIPE

FILEposhtik-campus\about.html

FINDthe whole file — Lab 2's h1, two paragraphs and two-link list

INSERTlink (7), header (11–14), nav (16–20), paragraphs in <main> (22–25), footer (27–29)

NEVERkeep the old <ul> — the nav replaces it

CHECK32 lines; the logo shows above "About us"

about.html · the complete file — 32 linesONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Poshtik Campus — About</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10
11  <header id="page-header">
12    <img src="images/poshtik-campus-logo.jpg" alt="Poshtik Campus logo" width="90">
13    <h1>About us</h1>
14  </header>
15
16  <nav>
17    <a href="index.html">Home</a>
18    <a href="menu.html">Menu</a>
19    <a href="about.html">About</a>
20  </nav>
21
22  <main>
23    <p>We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.</p>
24    <p>Find us beside the library block, open 8am&ndash;8pm.</p>
25  </main>
26
27  <footer>
28    <p>&copy; 2026 Poshtik Campus &middot; orders@poshtikcampus.in</p>
29  </footer>
30
31</body>
32</html>

suggested commit:git add .git commit -m "Give menu and about their semantic skeletons"

Move 4 · style.css — the starting stylesheet

Every page links it at line 7. Seven base rules, then the phone @media block, which stays last.

WHERE EXACTLY THIS GOES — FOLLOW LIKE A RECIPE

FILEa new file poshtik-campus\style.css, beside index.html

FINDnothing yet — the file starts empty

INSERTlines 1–40, the base rules; lines 41–56, the @media (max-width: 600px) block

NEVERinside images\, and nothing below line 56's closing }

CHECK56 lines; all three tabs show the dark banner; below 600px the cards go full width

style.css · the starting file — 56 linesONE LINE PER PRESS
1/* style.css — poshtik-campus, site-wide. 81 lines at the end of Lab 3. */
2body
3{
4  font-family: 'Segoe UI', Arial, sans-serif;
5  background-color: floralwhite;  /* warm off-white */
6  color: black;
7}
8#page-header  /* the banner rule — an id selector, one element only */
9{
10  background-color: darkslategray;
11  color: white;
12  padding: 16px;
13  text-align: center;
14}
15h1, h3
16{
17  color: seagreen;  /* the brand green */
18}
19.dish
20{
21  width: 300px;  /* content width; padding + border sit outside it */
22  background-color: mintcream;  /* pale mint */
23  border: 2px solid seagreen;
24  padding: 12px;
25  margin: 12px 0;
26}
27.dish h3
28{
29  font-size: 18px;
30  font-weight: 600;
31}
32nav a
33{
34  color: seagreen;
35  text-decoration: none;
36}
37footer p
38{
39  text-align: center;
40}
41/* ===== phone layout — the media query MUST stay last ============ */
42@media (max-width: 600px)
43{
44  .dish
45  {
46    width: 100%;  /* was 300px — now the full glass */
47  }
48  form
49  {
50    width: 100%;  /* was 480px — wider than many phones! */
51  }
52  h1
53  {
54    font-size: 22px;  /* headline, not billboard */
55  }
56}

Where this is heading

The finished site runs as real files in Part 14 — its nav bar and form styling come from Ex.1 and Ex.2, next.

suggested commit:git add .git commit -m "Add site-wide stylesheet"

EXERCISE 1 · THE BUILD BEGINS — NO CODE SHOWN YET

Style the header and the nav — on all three pages at once.

The owner's brief: "the top of every page should look like one brand — dark banner, and the links under it should sit in a proper bar, not float on the background." You own every tool this needs. Build first; the gate stays shut until you've tried.

MINI PROBLEM · EX.1 — THE NAV BECOMES A BAR

PROBLEM

The header banner is already styled (the existing #page-header rule) but the nav links float loose on the floralwhite page. Give the nav a bar of its own — and prove the change lands on all three pages.

REQUIREMENTS

The nav element gets a mintcream background, comfortable padding, and a 2px solid seagreen bottom edge.
The links spread out: 18px of space after each one (extend the existing nav a rule's work — write a second nav a rule and let the cascade merge them).
Placement rule: new base rules go above the @media block — the phone overrides must stay last in the file.
Reload all three tabs — one edit, three navs.

EXPECTED OUTPUT

Every page's links sit in a pale mint bar under the dark banner — and clicking Menu on the home page lands you on a menu page wearing the identical bar.

PLAN FIRST — WHICH SELECTORS, WHICH PROPERTIES, INSERTED WHERE?

Typed, saved, reloaded all three tabs? Only then.

SOLUTION SHEET · EX.1 — 11 LINES, INSERTED ABOVE THE @MEDIA BLOCK

style.css grows in the middle — lines 41 to 51.

Not appended at the bottom this time: the @media block keeps its seat as the last thing in the file, so base rules stay above their phone overrides. The block slides down to lines 52–67 — same 16 lines, new address.

WHERE EXACTLY THIS GOES — FOLLOW LIKE A RECIPE

FILEposhtik-campus\style.css — the one file, no other file is touched in Ex.1

FINDscroll to line 40 — the closing } of the footer p rule, the last base rule. Directly below it sits the @media block's comment line

INSERTclick at the end of line 40, press Enter to open a fresh line 41, and type the 11 new lines there — after footer p { … }, before the @media comment

NEVERbelow the @media block — phone overrides must stay the last thing in the file

CHECKafter saving, the file is 67 lines; line 52 starts the @media comment. Miscounted? Undo (Ctrl+Z) and re-find line 40.

style.css · INSERTED at line 41, above @mediaONE LINE PER PRESS
··/* the elements these rules find: every page's <nav> and the <a> links inside it (all three pages carry them since Parts 4 and 5) */
41/* ===== Lab 3 · Ex.1 — the nav becomes a bar ===== */
42nav
43{
44  background-color: mintcream;  /* the brand's pale mint */
45  padding: 10px 16px;
46  border-bottom: 2px solid seagreen;
47}
48nav a  /* SECOND nav a rule — the cascade merges, not replaces */
49{
50  margin-right: 18px;
51}
52/* ===== phone layout … slides down, stays LAST ===== */

THIS PREVIEW IS A WORKING SITE — CLICK THE NAV LINKS TO CHANGE PAGE

Poshtik Campus — Home

file:///C:/Users/student/Desktop/poshtik-campus/index.html

Poshtik Campus

HomeMenuAbout

Healthy food, made on campus — welcome.

Now click Menu, right here. The preview navigates like the real site — and the bar travels with you, because one file styles every page.

Poshtik Campus — Menu

file:///C:/Users/student/Desktop/poshtik-campus/menu.html

Poshtik Campus

HomeMenuAbout

Jonna Rotte Wrap — Price: Rs. 60

Sajja Roti Wrap — Price: Rs. 60

Same bar, same banner — menu.html is not opened in Ex.1; it simply reads the same style.css. Click About to keep travelling, or the round back button to return.

Poshtik Campus — About

file:///C:/Users/student/Desktop/poshtik-campus/about.html

Poshtik Campus

HomeMenuAbout

We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.

Third page, same bar — you never opened about.html in Ex.1. That's the external-stylesheet dividend, walked through with your own clicks.

Two nav a rules now exist — and that's not a mistake.

The stylesheet's existing nav a rule (colour, no underline) and today's (margin) select the same links. The cascade merges non-conflicting properties: the links are seagreen and spaced. Only when two rules set the same property does later-wins kick in — that's Q5's referee doing its everyday job.

Score your own build — three checks

The three-tab check: all three pages show the bar after one save. A page without the bar has a broken (or missing) <link> line — or, on index.html, the nav surgery from Part 4 was skipped.
The placement check: your new rules sit above @media. If they're below it, the file still works today — but the next phone override you write will silently lose to them. Move them now.
The merge check: links are green and spaced. Only spaced? You retyped color into the new rule and mistyped the old one away — one property per job, let the cascade combine.

suggested commit:git add .git commit -m "Style the site navigation"

PAST PAPER · ANSWERED THE HOUR ITS MATERIAL IS PRACTISED

PYQ · Part 1 · Q11(a) · 4+4 marks — a form plus its CSS, in one page.

You styled a real form twenty minutes ago. The exam's favourite combination question hands you the same two jobs at once: build a small form, then style it with internal CSS — a <style> block in the head, because a one-page answer has no site to share with.

SEMESTER END EXAM · PAPER 1 · QUESTION 11(a) 4+4 MARKS ~12 MINUTES

Ex.2 in exam clothes

Q11(a). Create an HTML page for an insurance claim form collecting: policy number, claimant name, date of incident, and claim description. Style the form using internal CSS so that the form has a light background, a visible border, and a clearly styled submit button. [4+4M]

Ans. — the two halves named first, then the code, then deeper than the marks ↓

1

Name the attachment before writing it (markers look for this). "Internal CSS" = one <style> block inside <head> — right for a single self-contained page; our multi-page site used external instead. One sentence, and the marker knows you know the difference.✓ 1

2

Choose controls by meaning (form half, 4M): policy number takes type="text" (not number — "PN-2024/117" has letters and a slash, never arithmetic) · name takes type="text" · date of incident takes type="date" (the browser's own calendar) · description takes <textarea>. Every control gets a paired <label> and a name.✓ 3

3

The style block (CSS half, 4M) — three rules, exactly what the question lists:

claim.html · PART 1 OF 2 · THE HEADHTML FIRST · THEN CSS · ONE LINE PER PRESS
1<head>
<meta charset="UTF-8">
<title>Insurance Claim</title>
<style>
  form
  {
    background-color: lavender;   border: 2px solid slateblue;
    padding: 16px;   width: 420px;
  }
  button
  {
    background-color: slateblue;   color: white;
    border: none;   padding: 8px 16px;
  }
</style>
16</head>

✓ 3

4

The form itself — the Lab-2 pattern, four fields:

claim.html · PART 2 OF 2 · THE BODYONE FIELD PER PRESS
1<form>
<p><label for="policy">Policy number</label>
   <input type="text" id="policy" name="policy"></p>
<p><label for="claimant">Claimant name</label>
   <input type="text" id="claimant" name="claimant"></p>
<p><label for="incident">Date of incident</label>
   <input type="date" id="incident" name="incident"></p>
<p><label for="details">Claim description</label>
   <textarea id="details" name="details" rows="3"></textarea></p>
<button type="submit">Submit claim</button>
11</form>

✓ 1

◫

Diagram — where each attachment lives, and which one this answer uses:

THREE ATTACHMENTS, THREE REACHES · THE QUESTION SAYS "INTERNAL", SO THE STYLE RIDES INSIDE THE PAGE

✎

The line that separates an 8 from a 6: "Internal CSS is chosen here because the claim form is one self-contained page; a multi-page site would move these same rules unchanged into an external file — the rules don't change, only their address." Selector knowledge is assumed; attachment judgement is what this question actually grades.✓

★

Beyond the marks: notice type="date" earned a free calendar widget — no CSS, no JavaScript. The platform gives away entire user interfaces when you declare meaning honestly. That habit — richest built-in control first, custom work second — is a production-engineering instinct the exam quietly rewards.✚ depth

Marks anatomy: 4M for the form (controls by meaning, labels paired) · 4M for internal CSS that delivers the three asked-for looks (light background, visible border, styled button). Most lost mark in real scripts: the <style> block written in the body — it often still renders, but the marker deducts for placement. Head, always.

The sheet earns the marks — now the file must actually run.

Type claim.html in your fswd-practice\lab-03\ sandbox. Here is its live output — the real widgets, the real behaviour, including the free calendar.

claim.html · the complete answer, typed like a scriptONE LINE PER PRESS · OUTPUT GROWS IN SYNC
1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>Insurance Claim</title>
<style>  /* INTERNAL — the question's own word */
  form
  {
    background-color: lavender;  /* light background ✓ */
    border: 2px solid slateblue;  /* visible border ✓ */
    padding: 16px;
    width: 420px;
  }
  button
  {
    background-color: slateblue;  /* styled button ✓ */
    color: white;
    border: none;
    padding: 8px 16px;
  }
</style>
22</head>
23<body>
<form>
  <p><label for="policy">Policy number</label>
     <input type="text" id="policy" name="policy"></p>
  <p><label for="claimant">Claimant name</label>
     <input type="text" id="claimant" name="claimant"></p>
  <p><label for="incident">Date of incident</label>
     <input type="date" id="incident" name="incident"></p>  <!-- free calendar -->
  <p><label for="details">Claim description</label>
     <textarea id="details" name="details" rows="3"></textarea></p>
  <button type="submit">Submit claim</button>
</form>
35</body>
36</html>

THE EXAM ANSWER, RUNNING — OPEN THE CALENDAR, THEN PRESS SUBMIT CLAIM

Insurance Claim

file:///C:/Users/student/Desktop/fswd-practice/lab-03/claim.html

Two things to try for real: click into the date field — the browser's own calendar opens, the reward for type="date". Then press Submit claim: the address bar grows ?policy=PN-2024%2F117&claimant=Ravi&incident=2026-08-20&details=… — note the slash in the policy number arrives encoded, more proof it was never a number.

Continuity check — nothing here is new.

The form half is Lab 2's muscle memory. The CSS half is Ex.2's three rules with the colours swapped (lavender/slateblue instead of mintcream/seagreen — both named colours, both honest). The only decision this question adds: which attachment. That's why it's worth 8 marks and costs you 12 minutes, not 25.

PAST PAPER · A QUICK FOUR — TYPOGRAPHY UNDER EXAM RULES

PYQ · Part 2 · Q16(a) · 4 marks — a profile page in a specified font.

A short one, and a favourite: it looks like "make a page", but the marks hide in the font-family line — spelling, quoting, and the safety net at the end of the stack.

SEMESTER END EXAM · PAPER 2 · QUESTION 16(a) 4 MARKS ~6 MINUTES

body rule = style.css, line 4

Q16(a). Write an HTML page showing a student profile (name as a heading, roll number and branch as paragraphs) where all text renders in Verdana. Use CSS. [4M]

Ans. — one rule does the whole job ↓

1

"All text" is the trigger phrase: don't style the heading and paragraphs one by one — put font-family on body once, and every element inherits it. That's the same move as poshtik's style.css line 4, which fonts the entire site from one line.✓ 1

2

Write the stack with a safety net: font-family: Verdana, Arial, sans-serif; — asked-for font first, a close cousin second, and the generic family last so a machine missing Verdana still shows a clean sans-serif. Never quote single-word font names; quote only multi-word ones like 'Segoe UI'.✓ 1

3

The complete page — internal CSS again (one page, no site):

profile.html · COMPLETE · RUNS IN ANY BROWSERHTML FIRST · THEN THE ONE CSS RULE
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Student Profile</title>
6  <style>
7    body
8    {
9      font-family: Verdana, Arial, sans-serif;
10    }
11  </style>
12</head>
13<body>
14  <h1>K. Student</h1>
15  <p>Roll number: 23CS511</p>
16  <p>Branch: Computer Science</p>
17</body>
18</html>

✓ 2

✎

The line that separates a 4 from a 3: "The rule sits on body because font-family is an inherited property — children use the parent's value unless they say otherwise. One rule, every element, including elements added later." Styling h1 and p separately also renders — but it misses the point being graded.✓

Student Profile

file:///C:/Users/student/Desktop/fswd-practice/lab-03/profile.html

K. Student

Roll number: 23CS511

Branch: Computer Science

This preview really renders in Verdana — compare its wide, boxy letters against this lesson's own text. Verdana was designed for screens: generous width, tall lowercase. Recognising fonts by eye is a quiet skill markers can't test — but interviews do.

Continuity check.

This is your stylesheet's line 4 (font-family: 'Segoe UI', Arial, sans-serif;) wearing exam clothes — same property, same stack shape, same inheritance argument. Note the difference in quoting: 'Segoe UI' needs quotes (two words), Verdana must not have them. That distinction alone has cost real students a mark.

PAST PAPER · TODAY'S ONE GENUINELY NEW FACT

PYQ · Part 4 · Q11(b) · 4 marks — @media can target paper, not just widths.

Everything today has been practice of known moves — except this. Your stylesheet already ends with @media (max-width: 600px): a condition about window size. The same @media can instead ask what the page is being rendered onto — a screen, or a sheet of paper. One new word: print.

SEMESTER END EXAM · PAPER 4 · QUESTION 11(b) 4 MARKS ~6 MINUTES

the same shell, one new word

Q11(b). What are media types in CSS? Write CSS so that a page's navigation bar is hidden when the page is printed, and body text prints in black on white. [4M]

Ans. — definition first, then the code ↓

1

Definition (1M): a media type names the output device class a rule set targets — chiefly screen (monitors and phones) and print (paper and PDF). Width queries ask "how big is the window?"; a media type asks "what am I being drawn onto?" Same @media gate, different question.✓ 1

2

The code (2M) — the same shell with print in the parentheses' place:

APPEND TO ANY STYLESHEET · TEST WITH CTRL+PONE RULE PER PRESS
1@media print
2{
3  nav
4  {
5    display: none;   /* paper can't click links */
6  }
7  body
8  {
9    background-color: white;
10    color: black;      /* ink is expensive; contrast is free */
11  }
12}

✓ 2

3

Why hide the nav at all (the reasoning mark): a printed page can't be clicked — a nav bar on paper is dead weight that costs ink. Print styles keep content and drop interaction. Cheap test, no printer needed: Ctrl+P shows the print rendering in the preview dialog.✓ 1

✎

The line that separates a 4 from a 3: "Note the syntax difference: media types stand bare — @media print — while media features take parentheses — @media (max-width: 600px). The two can combine: @media print and (max-width: …)." Naming both forms shows the full map, not one memorised line.✓

★

Beyond the marks: poshtik-campus has a real use waiting — the canteen owner will one day print the menu as a poster. The same site, one @media print block, and menu.html becomes a printable price list with no nav and no form. One document, many renderings — that idea is the whole reason CSS was separated from HTML in the first place.✚ depth

See it, don't imagine it — the menu page on screen vs on paper.

Below is menu.html with the print block added. The two buttons switch the rendering target — exactly what your browser does when Ctrl+P opens.

style.css · the print block, typed like a scriptONE LINE PER PRESS · OUTPUT GROWS IN SYNC
·/* appended at the very bottom of style.css, below the phone @media block */
1@media print  /* the type stands bare — no parentheses */
2{
3  nav
4  {
5    display: none;  /* paper can't click links */
6  }
7  body
8  {
9    background-color: white;
10    color: black;  /* ink is expensive; contrast is free */
11  }
12}

A REAL TARGET SWITCH — PRESS SCREEN, THEN PRESS PRINT PREVIEW

Poshtik Campus — Menu

file:///C:/Users/student/Desktop/poshtik-campus/menu.html

Poshtik Campus

HomeMenuAbout

Ragi Idli — ₹30

Veg Thali — ₹60

Press PRINT PREVIEW and watch three rules land at once: the nav vanishes (display: none), the background flattens to white, the text drops to black-on-white ink economy. Press SCREEN and everything returns — the HTML never changed, only the rendering target. On your own file, Ctrl+P is this button.

Where does this block go in the real style.css? — exactly here:

Open poshtik-campus\style.css, press Ctrl+End to jump to the very last line (line 81, the phone @media block's closing }), press Enter to open line 82, and type the 12 print lines there — appended at the very bottom, after the phone @media block. The two gates don't overlap (one asks about width, one about paper), so their order between themselves doesn't matter, but both stay below the base rules. This block is homework, not part of today's commit — see Part 15.

PAST PAPER · THE THEORY QUESTION THAT NAMES THE LANGUAGE

PYQ · Part 3 · Q11(b) · 4 marks — "cascading", finally asked head-on.

You answered Q5 this morning with the word cascade. This question makes you define it, prove you can attach an external stylesheet, and place a logo as a background image — three small jobs, four marks.

SEMESTER END EXAM · PAPER 3 · QUESTION 11(b) 4 MARKS ~7 MINUTES

prelab Q5, now for marks

Q11(b). Why is CSS called "Cascading" Style Sheets? Show how an external stylesheet is attached to a page, and write a rule that places a company logo as the background image of the page header. [4M]

Ans. — the word, the link, the rule ↓

1

"Cascading" (2M): several rules can target the same element — the browser resolves conflicts by a fixed waterfall of priority: later rules beat earlier ones at equal weight, more specific selectors beat less specific (#id > .class > element), and direct rules beat inherited defaults. Example from our own site: body says black text, h1, h3 says seagreen — headings go seagreen because the direct, later rule wins. The order of rules in the file is part of the design — which is why our @media overrides live at the bottom.✓ 2

2

Attaching an external sheet (1M) — one line in the head, the same line every poshtik page already carries:

THE LINK LINE · INSIDE <head>ONE LINE
1<link rel="stylesheet" href="style.css">

✓ 1

3

The logo as a background (1M) — background, not <img>, because the question calls the logo decoration of the header, not content:

IN style.css · THE HEADER RULE GROWS THREE LINESONE PROPERTY PER PRESS
1#page-header
2{
3  background-image: url("images/logo.jpg");
4  background-repeat: no-repeat;
5  background-position: left center;
6}

✓ 1

✎

The line that separates a 4 from a 3: "<img> is for images that are content (a dish photo — the page is poorer without it); background-image is for images that are decoration (the page's meaning survives without the logo)." One sentence of judgement, the mark the memorisers miss.✓

★

Beyond the marks: the URL inside url("images/logo.jpg") is resolved relative to the CSS file, not the HTML page — the classic production bug when a stylesheet moves into a css/ subfolder and every background breaks. Poshtik dodges it by keeping style.css at the root, beside images/.✚ depth

And here's that rule running on our own header — with our own logo.

The logo below is the real poshtik-campus-logo.jpg you copied into images/ in Part 5. Three lines of CSS, and the header carries the brand mark.

Poshtik Campus — Home

file:///C:/Users/student/Desktop/poshtik-campus/index.html

Poshtik Campus

Healthy food, made on campus — welcome.

Look left: the logo sits at left center, appears once (no-repeat), and the heading text flows over the background — text over background is exactly the relationship background-image promises. Try this on your real header after class; it's not part of today's commit.

THE RECKONING · YOUR CLASS-11 CRACK LOG, CRACK BY CRACK

Take out the paper. Every crack you logged gets verified closed — now.

Your crack log is the audit of the plain site — every visual flaw you wrote down by hand. That log was a promise: each entry will be fixed by a line you can point to. Today the stylesheet is finished — so the log gets settled, entry by entry, in your own browser.

The verification protocol — for each crack on your log:

Read the crack aloud ("dish cards touch the window edge on my phone").
Name the line in style.css that closes it — by number.
Reload the page and confirm with your eyes; for phone cracks, drag the window edge below 600px.
Tick it on the paper. An entry you can't tick is a real bug: fix it before Part 13's commit.

Typical logs settle like this: Times New Roman everywhere → line 4 · wall-of-white sameness → lines 5, 22 · cramped card text → line 24 · cards glued together → line 25 · underlined blue nav links → lines 34–35 · cards overflow a phone screen → line 71 (@media) · form wider than a phone → line 75 (@media).

LAPTOP · 1280PX — THE WIDE RENDERING

Poshtik Campus Menu

Jonna Rotte WrapSorghum-flatbread wrap — Rs. 60

Sajja Roti WrapPearl-millet flatbread wrap — Rs. 60

— order form · 480px wide —

Base rules only: 300px cards with breathing room, the form at its comfortable desk width.

PHONE · 360PX — THE SAME FILES, RE-DRESSED

Poshtik Campus Menu

Jonna Rotte WrapSorghum-flatbread wrap — Rs. 60

Sajja Roti WrapPearl-millet flatbread wrap — Rs. 60

— order form · full width —

Below 600px the @media block engages: cards and form stretch to 100%, the h1 calms to 22px. Not one HTML file was touched.

The sentence to say when the last crack is ticked:

"Every fix on this site is a rule, not an edit" — the HTML is byte-for-byte what Parts 4 and 5 left, and those parts added meaning, not looks. Presentation lives entirely in one 81-line file. That separation is Unit 1's biggest single idea, and you just verified it with a checklist.

THE RITUAL · EVERY LAB ENDS AT THE TERMINAL

The Unit-1 closing push — your repo's story gains its styling chapter.

You've committed five times already today (Part 4's surgery, Part 5's two, then Ex.1 and Ex.2). What remains is the check that everything is recorded, and the push that puts Unit 1's finished site on GitHub.

MINI PROBLEM · TERMINAL — THE END-OF-UNIT CHECKPOINT

PROBLEM

Confirm the working tree is clean, review the story so far, and push every Lab-3 commit to GitHub.

REQUIREMENTS

git status — expect nothing to commit, working tree clean; anything listed means an unsaved or uncommitted fix from Part 12.
git log --oneline — read your repo's seven-commit story out loud.
Plain git push — the branches have been linked since Lab 1.

EXPECTED OUTPUT

main -> main on the push; the repo page shows style.css beside its latest message.

the git-push checkpoint · unit 1 signs offONE LINE PER PRESS
·student@lab-12:~/poshtik-campus$ git status
·nothing to commit, working tree clean
·student@lab-12:~/poshtik-campus$ git log --oneline
·8c1f4d2 Style the menu order form
·5b7e9a3 Style the site navigation
·c3e6d10 Add site-wide stylesheet
·9e2a6b4 Give menu and about their semantic skeletons
·2d4c8e1 Give index.html its semantic skeleton
·4f9c2b1 Add order form to menu
·a1d3e07 First version of Poshtik Campus site
·student@lab-12:~/poshtik-campus$ git push
·To https://github.com/you/poshtik-campus.git
·   4f9c2b1..8c1f4d2  main -> main

Read that log bottom-up — it's Unit 1's autobiography.

First version → order form → index skeleton → menu and about skeletons → stylesheet → styled nav → styled form. Seven commits, each one sentence, each a step you lived. When revision week comes, this log is your syllabus map — and when Unit 2's commits start stacking on top, the story simply continues in the same book.

PROJECT STATE · UNIT 1 COMPLETE

Four files and a photo folder — a real website, built by you, on the record.

This is the folder three labs built. Nothing in it is scaffolding; every file earns its place, and the map below says which lab put each piece there.

POSHTIK-CAMPUS · AFTER TODAY'S PUSH — THE UNIT-1 FINAL STATE

poshtik-campus/

index.html — Lab 1 · semantic skeleton + logo today (Part 4) ★

menu.html — Lab 1 dish list · Lab 2 order form · ten photo cards today (Part 5) ★

about.html — Lab 1 · semantic skeleton today (Part 5) ★

style.css — 56 starting lines (Part 5) · +Ex.1 +Ex.2 = 81 lines ★

images/ — the ten dish photos + the logo, today (Part 5) ★

.git/ — 7 commits: the whole Unit-1 story

WHAT THE VISITOR SEES	WHICH FILE	BUILT / STYLED BY
Home page — banner, nav bar, welcome	`index.html`	Lab 1 · surgery + bar styled today
Menu — 10 dish cards, prices	`menu.html`	Lab 1 names · cards built in Part 5, styled by `.dish`
Order form — name to Place order	`menu.html`	Lab 2 · branded today (Ex.2)
About — the story, the team	`about.html`	Lab 1 · skeleton in Part 5 · styled by style.css
Every colour, width, font, phone layout	`style.css`	Part 5's 56 lines → Ex.1 + Ex.2

Unit 1's finished website — the real files, running, styled.

Four genuine files in a browser frame: three pages and the 81-line style.css they all link. Nothing below is drawn. The banner is darkslategray because your #page-header rule says so; the cards are mintcream inside seagreen borders because your .dish rule says so. Switch pages and the bar travels with you — one stylesheet, three pages, the dividend you were promised in Ex.1.

REAL FILES, REAL BROWSER · YOUR 81-LINE STYLE.CSS DOING THE PAINTING

file:///C:/Users/student/Desktop/poshtik-campus/index.html

FRAME WIDTH →

Press 390px and watch the last block of your stylesheet earn its place. The cards drop their width: 300px for 100%, the form drops 480px for 100%, and the h1 shrinks to 22px — because narrowing the frame really does cross the max-width: 600px threshold. This is your @media block executing, not an illustration of it.

What happens to this folder now? It graduates — it does not retire.

Lab 4 opens Unit 2 by adding one line to menu.html: <script src="script.js"></script>. The same folder, the same repo, a fifth file — and the site starts to think: totals calculated, forms checked before submitting, dishes filtered live. Structure (HTML) → presentation (CSS) → behaviour (JavaScript): the three-layer story continues in the same place it began.

LAB 3 · COMPLETE — AND WITH IT, UNIT 1

Say these out loud. Hesitation marks your revision list.

I can take a plain multi-page HTML site to a finished look with one external stylesheet — and say why external beats internal for a site.

I can choose between element, .class and #id selectors by role, species and identity — and defend the choice in one sentence.

I can explain the cascade with a real example from my own site — and why my @media blocks must sit last.

I can write @media for widths and for print — parentheses for features, bare word for types.

I can read my git log as the project's story — and clone my own repo onto any machine, mid-unit, without fear.

HOMEWORK 1 · EXTEND

Append the @media print block from Part 10 to your real style.css, verify with Ctrl+P that the nav vanishes, and commit: "Add print stylesheet for menu".

HOMEWORK 2 · EXAM HAND

Write P1·Q11a (the claim form, both halves) once on paper, from memory, timed at 12 minutes. Then type it and run the click test — paper first, the exam hall has no autocomplete.

READ AHEAD · 10 MIN

Unit 2 opens with a question: "the Place order button sends data away — could the page itself react instead?" Sit with it, and bring one written sentence. JavaScript answers it in Lab 4.

EXIT TICKET · 60 SECONDS, ON PAPER

Two sentences: (1) Why do the base rules sit above the @media block in style.css — what exactly goes wrong if a base rule moves below it? (2) Your site has 3 HTML pages and 1 CSS file — a client wants the brand colour changed sitewide: how many files do you edit, and which line proves it?

Exam strategy — Unit 1's four bankers, all rehearsed today.

Across the four papers, Unit 1 reliably pays: a form-building question (Lab 2's muscle), a CSS attachment question (internal vs external — today's P1 and P3), a selector/cascade theory bite (today's P3), and a @media question (widths or print — today's P4). You now hold a worked, runnable answer to every one of them, in your own handwriting and in your own repo.

Next: the site starts to think.

Unit 1 gave your site structure and a face. Unit 2 gives it a brain — variables, functions, events, the DOM. Same folder, same repo, one new file. Lab 4 creates script.js with your own hands.

Back · Lab 2 — HTML Forms (Ex.2) Unit 1 home Next class · Class 13 — Why JavaScript, ES6 & your first script Next lab · Lab 4 — JavaScript reads your form (Ex.4)

How are you here today?

The full stylesheet — poshtik-campus/ leaves Unit 1 finished.

Walk out of this lab able to…

Write a class-selector rule: every dish card gets its mint background.

Write the @media skeleton for phones — from memory, punctuation and all.

Margin vs padding — point to the difference on a real card.

The whole `.dish` rule, one line at a time — see each property land.

Two questions, answered by you first. Then the sheet.

Four tiny files, four CSS moves. Type first, then look.

Poshtik Campus

Open poshtik-campus. After today, this project graduates to Unit 2.

Before any styling: index.html gets its semantic skeleton.

Upgrade menu.html and about.html, add the photos, start style.css.

Move 1 · the photo folder

Move 2 · menu.html — ten list items become ten photo cards

Move 3 · about.html — the same skeleton, shorter

Move 4 · style.css — the starting stylesheet

Style the header and the nav — on all three pages at once.

style.css grows in the middle — lines 41 to 51.

Style the order form — Lab 2's work gets its brand clothes.

style.css · lines 52 to 65 — the file reaches 81 lines.

PYQ · Part 1 · Q11(a) · 4+4 marks — a form plus its CSS, in one page.

PYQ · Part 2 · Q16(a) · 4 marks — a profile page in a specified font.

K. Student

PYQ · Part 4 · Q11(b) · 4 marks — @media can target paper, not just widths.

PYQ · Part 3 · Q11(b) · 4 marks — "cascading", finally asked head-on.

Take out the paper. Every crack you logged gets verified closed — now.

The Unit-1 closing push — your repo's story gains its styling chapter.

Four files and a photo folder — a real website, built by you, on the record.

Unit 1's finished website — the real files, running, styled.

Say these out loud. Hesitation marks your revision list.

The full stylesheet — poshtik-campus/ leaves Unit 1 finished.

Walk out of this lab able to…

Write a class-selector rule: every dish card gets its mint background.

Write the @media skeleton for phones — from memory, punctuation and all.

Margin vs padding — point to the difference on a real card.

The whole .dish rule, one line at a time — see each property land.

Two questions, answered by you first. Then the sheet.

Four tiny files, four CSS moves. Type first, then look.

Poshtik Campus

Open poshtik-campus. After today, this project graduates to Unit 2.

Before any styling: index.html gets its semantic skeleton.

Upgrade menu.html and about.html, add the photos, start style.css.

Move 1 · the photo folder

Move 2 · menu.html — ten list items become ten photo cards

Move 3 · about.html — the same skeleton, shorter

Move 4 · style.css — the starting stylesheet

Style the header and the nav — on all three pages at once.

style.css grows in the middle — lines 41 to 51.

Style the order form — Lab 2's work gets its brand clothes.

style.css · lines 52 to 65 — the file reaches 81 lines.

PYQ · Part 1 · Q11(a) · 4+4 marks — a form plus its CSS, in one page.

PYQ · Part 2 · Q16(a) · 4 marks — a profile page in a specified font.

K. Student

PYQ · Part 4 · Q11(b) · 4 marks — @media can target paper, not just widths.

PYQ · Part 3 · Q11(b) · 4 marks — "cascading", finally asked head-on.

Take out the paper. Every crack you logged gets verified closed — now.

The Unit-1 closing push — your repo's story gains its styling chapter.

Four files and a photo folder — a real website, built by you, on the record.

Unit 1's finished website — the real files, running, styled.

Say these out loud. Hesitation marks your revision list.

The whole `.dish` rule, one line at a time — see each property land.