UNIT 1 · WEB BASICS, HTML & CSS PART A · CLASS 10 OF 12 UI23PC510CS · THEORY

Today's craft

You can aim. Now load the paint — properties, values, and the stylesheet your whole site shares.

Class 9 taught the who of CSS: selectors — element, .class, #id, descendant, grouped. Every rule you wrote borrowed its insides. Today is the what: the properties and values that actually change how things look — colours, fonts, alignment, decoration. And one structural upgrade you'll keep for the rest of the course: style.css — ONE real external stylesheet, created today and linked from every page of a three-page site you build from scratch in this very session, the way working developers actually ship.

Walk out of this room able to…

Set text and background colours with named colours and hex codes — and say when to use which

Control typography with font-family, font-size and font-weight — including why a font stack has fallbacks

Create ONE style.css and link it from every page — one edit, whole site changes

Centre content the classic way and answer the PYQ: role of CSS + a centred, coloured form

TODAY, POINT BY POINT

01Colour lands — color & background-color, named colours vs hex codesIDEA

02Typography — font-family stacks, font-size, font-weightIDEA

03Text control — text-align and text-decoration (links lose their underline, deliberately)IDEA

04THE upgrade — style.css born, linked from every page of a three-page site (built from scratch)THE MOMENT

05Activity 1 — two stylesheets, same render: which one can you maintain?TRY IT

06Activity 1 verdict — the style-guide checklistSOLUTION

07PYQ · P4·Q16a · 4m — role of CSS + a form with centred controls and coloursEXAM Q

08Centring content — the classic margin: auto + text-align techniqueIDEA

09Activity 2 — build the poshtik header's CSS from a written specTRY IT

10Activity 2 verdict — solution sheet with live previewSOLUTION

11Self-study + close — shorthand properties, your folder after todaySELF-STUDY

Property № 1 — colour

color and background-color — the two properties everyone learns first.

Class 9's rules had borrowed insides — you copied color: green without being told what else could go there. Today the insides are the lesson. color paints the text of an element; background-color paints the box behind it. And every colour value you'll ever write comes in one of two dialects: named colours and hex codes.

saddlebrownA named colour — about 140 exist. This one is the colour of ragi itself; a ragi dish's heading should wear it.

seagreenPoshtik's brand green. Named, memorable — its hex twin is #2E8B57.

darkslategrayThe header's dark coat since Class 9's activity (hex twin #2F4F4F).

mintcreamThe pale tint behind every dish card.

floralwhiteThe site's warm page background — deliberately not pure white.

blackBody text — the plainest name in CSS, and it just works.

The choosing rule for this course: we write named colours everywhere — seagreen is something you can remember, say aloud, and type without a cheat-sheet. Hex codes are the professional dialect design tools hand developers — you must be able to read one when DevTools or a designer shows it to you (that's the GOING DEEPER box below), but you won't be asked to memorise any. Every named colour has an exact hex twin; both point at the same paint.

class-10/colour-demo.html · complete fileSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <title>Colour demo</title> </head>
4<body>
5  <h2>Ragi Idli Bowl</h2>
6  <p class="highlight">Soft steamed finger-millet idlis.</p>
7  <p>Prices include all taxes.</p>
8</body>
9</html>
·/* HTML is complete & plain above. Now add a <style> — one rule per press ↓ */
10  body { background-color: floralwhite; }              /* warm off-white page */
11  h2 { color: saddlebrown; }                    /* ragi brown — the dish's own colour */
12  p { color: darkslategray; }                    /* deep grey-green — every paragraph */
13  .highlight { background-color: mintcream; }  /* pale mint behind the one .highlight */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN EACH RULE

colour-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-10/colour-demo.html

Ragi Idli Bowl

Soft steamed finger-millet idlis.

Prices include all taxes.

First the three plain HTML lines grow. Then each rule lands: the page warms to floralwhite, the heading turns saddlebrown, paragraphs darkslategray, and only the .highlight paragraph gets the mint box.

Two properties, two targets: color painted the letters (the heading saddlebrown — ragi really is brown millet, so the dish name wears its own colour; paragraphs darkslategray); background-color painted the box behind one paragraph mintcream — see how the highlight stops where the paragraph's box stops. Four colours, four names, zero codes to memorise — and each colour chosen because it means something.

SAVE THIS AS

FOLDERC:\Users\student\Desktop\fswd-practice\class-10\

FILENAMEcolour-demo.html — the exact 29 lines from the panel

GIT?No — sandbox practice. Only the continuous project (built in labs) carries commits.

GOING DEEPER — READING A HEX CODE

A hex code is three pairs: #RRGGBB — how much red, green and blue light to mix, each pair running from 00 (none) to FF (full). So #2E8B57 — seagreen's hex twin — is a little red, strong green, medium blue. #FFFFFF is all three at full (white), #000000 all three off (black). You never compute these by hand: every colour picker — including the one built into VS Code when you hover a colour value — writes them for you.

Two more value dialects exist — rgb(46, 139, 87) and hsl(…) — and DevTools will show you both. This course writes named colours so nothing needs memorising; you only need to recognise hex when tools show it.

Property № 2 — typography

font-family, font-size, font-weight — the voice of the page.

In Class 9's skeleton you typed font-family: Arial without ceremony — it was pre-written, you only chose selectors. Today it earns its explanation, and gains its missing safety net: the font stack. A font only renders if it's installed on the visitor's machine — so professionals never name one font. They name a queue.

THE FONT STACK — READ LEFT TO RIGHT, FIRST AVAILABLE WINS

1

'Segoe UI' — first choice. Used if the visitor's machine has it (most Windows machines do). The quotes are required because the name contains a space.

2

Arial — the fallback. Installed nearly everywhere; no quotes needed for a one-word name.

3

sans-serif — the generic family: "any clean font without serifs, browser's pick." Not a font name — a guarantee. Every stack you ever write ends with one.

Read the stack aloud: "Use Segoe UI; if you can't, use Arial; if you can't, use any sans-serif." The comma list is a queue of preferences, not a combination — exactly one font renders. Ending without a generic family is the classic half-mark loss: a stack that can still fail.

typography-demo.html · complete file, from scratchSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <meta charset="UTF-8"> <title>Typography demo</title> </head>
4<body>
5  <h1>Poshtik Campus Menu</h1>
6  <article class="dish"><h3>Jonna Rotte Wrap</h3><p>Price: Rs. 60</p></article>
7  <article class="dish"><h3>Ragi Idli Bowl</h3><p>Price: Rs. 50</p></article>
8</body>
9</html>
·/* HTML is complete & plain above. Now add a <style> — one rule per press ↓ */
10  body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 16px; }  /* the stack — first available wins */
11  h1 { font-size: 28px; }                       /* the one big heading */
12  .dish h3 { font-size: 18px; font-weight: 600; }  /* Class 9's descendant selector, re-used */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN EACH RULE

typography-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-10/typography-demo.html

Poshtik Campus Menu

Jonna Rotte Wrap

Price: Rs. 60

Ragi Idli Bowl

Price: Rs. 50

First the heading and two cards grow as plain HTML (serif, default sizes). Then each rule lands: the whole page switches to the sans-serif stack, the h1 grows to 28px, and both dish names settle at semi-bold 18px through ONE .dish h3 rule.

Three properties, one visible shift: the whole file speaks the stack's first available font, the heading grows to 28px, and both dish names settle at semi-bold 18px through ONE .dish h3 descendant rule (Class 9's skill). On a full menu page, the SAME three rules re-voice every card at once — Part 5 proves it site-wide.

GOING DEEPER — KEYWORDS, NUMBERS, AND UNITS

font-weight: bold and font-weight: 700 mean the same thing — the keyword is an alias for the number. The numeric scale (100–900) exists because good font files ship many weights; 600 (semi-bold) has no keyword at all, which is why professionals write numbers.

px is today's only size unit, on purpose. Relative units (em, rem, %) exist and matter for accessibility — they arrive once the box model gives them something to be relative to.

Property № 3 — text control

text-align and text-decoration — placement and ornament.

Two small properties with outsized daily use. text-align slides a block's text left, right or centre. text-decoration adds or removes lines through text — and its most famous job is subtraction: taking the underline off nav links, deliberately.

text-control-demo.html · complete file, from scratchSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <meta charset="UTF-8"> <title>Text control demo</title> </head>
4<body>
5  <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="about.html">About</a></nav>
6  <article><p>Read the <a href="recipe.html">recipe</a>.</p></article>  <!-- NOT in a nav -->
7  <footer><p>© 2026 Poshtik Campus</p></footer>
8</body>
9</html>
·/* HTML is complete & plain above. Now add a <style> — one rule per press ↓ */
10  nav a { text-decoration: none; color: seagreen; }  /* underline OFF — deliberately; brand green */
11  footer p { text-align: center; }              /* the © line, centred */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN EACH RULE

text-control-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-10/text-control-demo.html

Home Menu About ← nav links

Read the recipe. ← in an article, NOT the nav

First all three lines grow as plain HTML (blue underlined links, left footer). Then nav a lands — only the nav links go seagreen & lose their underline; the article's recipe link keeps its. Then footer p centres the © line.

Subtraction with judgement: the underline vanished only where the nav a descendant selector reaches — links inside articles keep it. And the © line slid to the centre of its full-width block: text-align moves the text, not the box. Hold that sentence; Part 8 depends on it.

The underline warning, stated once: to a reader, an underline means "this is a link." Remove it only where the context already screams link — a nav bar, a button-shaped element. Stripping underlines from links inside running text makes them invisible, and that costs real users and real marks. Subtract with a reason, never by habit.

GOING DEEPER — THE OTHER VALUES

text-align takes left (the default), right, center (American spelling, always) and justify — newspaper-style flush edges, rarely good on screens. text-decoration can also add: underline, and line-through — the strikethrough every "old price ~~Rs. 80~~ now Rs. 60" offer uses. One property, both directions: ornament on, ornament off.

YOUR NOTEBOOK — why is removing the underline SAFE in a nav bar but RISKY inside a paragraph? One sentence each.

The structural upgrade — today's moment

One file. Three pages. style.css is born.

Every demo so far styled one page at a time. Class 9 promised more: one stylesheet can restyle a thousand pages. Time to collect — and you'll build the whole proof from scratch, right now, in one sandbox folder: three tiny pages (typed below — home, menu, about) plus ONE style.css. Link the sheet from all three heads and watch one file govern a whole site. This is the exact move the continuous project makes in the lab — today you own the mechanism.

THE THREE-STEP MOVE

STEP 1

Make a fresh folder class-10\site\ and type the three tiny pages below — index, menu, about. Each is complete in a dozen lines; nothing from any earlier class is needed.

STEP 2

In VS Code: File → New File → save as style.css in the SAME folder — Class 9's selectors plus today's typography, colour and text-control rules. The full file builds line by line below.

STEP 3

Each page's <head> already carries the ONE magic line: <link rel="stylesheet" href="style.css">. Save the sheet once — all three pages change together.

First, the three pages — typed from scratch, one press per line. Deliberately tiny: a header, a line or two of content, and the one <link> that matters. All three point at the same style.css.

class-10/site/ · three complete pagesBUILDS ONE FILE PER PRESS-RUN
·<!-- ── index.html ── -->
1<!DOCTYPE html><html lang="en"><head><title>Poshtik Campus</title>
2  <link rel="stylesheet" href="style.css"></head>
3<body><header id="page-header"><h1>Poshtik Campus</h1></header>
4  <nav><a href="menu.html">Menu</a> <a href="about.html">About</a></nav>
5  <p>Healthy Food, Healthy Body, Healthy Mind — welcome.</p></body></html>
·<!-- ── menu.html — same head, dish cards in the body ── -->
1<!DOCTYPE html><html lang="en"><head><title>Menu</title>
2  <link rel="stylesheet" href="style.css"></head>
3<body><header id="page-header"><h1>Poshtik Campus Menu</h1></header>
4  <article class="dish"><h3>Jonna Rotte Wrap</h3><p>Rs. 60</p></article>
5  <article class="dish"><h3>Ragi Idli Bowl</h3><p>Rs. 50</p></article></body></html>
·<!-- ── about.html — same head, an about line in the body ── -->
1<!DOCTYPE html><html lang="en"><head><title>About</title>
2  <link rel="stylesheet" href="style.css"></head>
3<body><header id="page-header"><h1>About Us</h1></header>
4  <p>Run by students, for students, since 2024.</p></body></html>

class-10/site/ — before style.css exists

file:///C:/Users/student/Desktop/fswd-practice/class-10/site/

index.html · typed. Header, nav, one welcome line — browser defaults everywhere, because line 2's link points at a file that doesn't exist yet.

menu.html · typed. Same head, two .dish cards — also bare.

about.html · typed. Three pages, one missing stylesheet — the stage is set.

Three bare pages, one shared promise: every head points at style.css. The moment that file exists, all three transform at once — that's the experiment.

Now the stylesheet, one press per line. Nothing here is new syntax — every selector is Class 9's, every property is today's Parts 2–4. What's new is the address: these rules live where all three pages can reach them.

class-10/site/style.css · complete fileBUILDS ONE LINE PER PRESS
·/* SELF-CONTAINED — this sheet styles the three pages you just typed above:        */
·/* a header with id="page-header", articles with class="dish", h1/h3 headings,     */
·/* and a nav. Nothing outside class-10/site/ is needed.                             */
1/* style.css — one sheet, site-wide. Born Class 10. */
2body
3{
4  font-family: 'Segoe UI', Arial, sans-serif;
5  background-color: floralwhite;  /* warm off-white */
6  color: black;
7}
8#page-header  /* Class 9's rule, kept */
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;  /* Class 11 explains the box around this */
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}

style.css — VS Code

C:\Users\student\Desktop\fswd-practice\class-10\site\style.css

Lines 2–7 · the base voice. Font stack, floralwhite background, black text — set once on body, inherited by every element on every page.

Lines 8–18 · Class 9's selectors, rehomed. The header and heading rules move in unchanged — your selector work survives the move because selectors don't care which file they live in.

Lines 19–40 · today's properties at work. Cards (now a fixed 300px wide), dish names, nav links, footer — every rule from Parts 2–4, now written at its permanent address.

40 lines govern the whole site. This file has no idea how many pages will link to it — three today, thirty next semester. That indifference is the entire power of external CSS. Every colour in it is a name — seagreen, mintcream, darkslategray, floralwhite — nothing to memorise.

The payoff — one save, three pages. The link line is already in all three heads (you typed it). Watch the right side: as the sheet lands, page after page lights up.

three <head>s · one line eachONE PRESS = ONE WHOLE PAGE STYLED
··<!-- index.html's head already says: -->
··<link rel="stylesheet" href="style.css">  <!-- → SAVE style.css … -->
··<!-- menu.html's head — the SAME line: -->
··<link rel="stylesheet" href="style.css">  <!-- … and it dresses … -->
··<!-- about.html's head — the SAME line: -->
··<link rel="stylesheet" href="style.css">  <!-- … all three at once. -->

THE WHOLE SITE CHANGES — THREE TABS, ONE FILE

class-10/site/ — all pages

file:///C:/Users/student/Desktop/fswd-practice/class-10/site/ · index · menu · about

Poshtik Campus index.html — styled for the FIRST time ever

Healthy Food, Healthy Body, Healthy Mind — welcome.

Poshtik Campus Menu menu.html — same look, new source

Jonna Rotte Wrap · Rs. 60

About Us about.html — styled for the FIRST time ever

Run by students, for students, since 2024.

This is the moment the class was building toward: three pages you typed ten minutes ago, dressed by ONE file the instant it was saved. From now on, changing the brand colour means editing one colour name in one file — and thirty pages would obey as readily as three. The lab repeats this exact move on the continuous project.

Slow-motion replay — watch ONE page dress itself, one rule at a time. The right side starts as the bare page — browser defaults, exactly what you saw before the stylesheet existed. Then press once per rule: each CSS block you reveal on the left lands on the live page instantly. Nothing jumps in fully-formed — you see plain HTML first, then colour, then layout, arriving in the same order you type them.

style.css · applied to index.html, liveONE PRESS = ONE RULE ON THE PAGE
·/* index.html is already on screen (bare). Add rules \u2193 */
1body { font-family: 'Segoe UI', sans-serif; background: floralwhite; }
2#page-header { background: darkslategray; color: white; padding: 14px; text-align: center; }
3h1 { color: white; margin: 0; }
4nav a { color: seagreen; text-decoration: none; margin: 0 8px; }
5p { color: #334155; padding: 10px 14px; }

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

index.html

file:///C:/Users/student/Desktop/fswd-practice/class-10/site/index.html

Poshtik Campus

Healthy Food, Healthy Body, Healthy Mind — welcome.

Before any press the page is bare — Times serif, blue underlined links, no header bar (real browser defaults). Each press below adds exactly one rule.

Watch the header turn into a dark centred bar the instant rule 2 is revealed — no sooner.

That is CSS in sync: the HTML was on screen from the first frame; each rule changed exactly what it names, in the order you typed it. If you press Back, the page undresses one rule at a time too.

SAVE THIS AS

FOLDERC:\Users\student\Desktop\fswd-practice\class-10\site\ — four files side by side: three pages + the sheet

FILENAMEstyle.css — this exact name; every page's <link> points at it

GIT?No — sandbox practice. The continuous project gets its own site-wide stylesheet in the lab, as a milestone commit there.

One rule worth locking now: one page, one stylesheet link. Two stylesheets fighting over one page is next week's specificity headache, volunteered early — if you ever migrate rules from an old sheet to a new one, delete the old link the same minute.

GOING DEEPER — RESTRUCTURE AND RESTYLE ARE SEPARATE JOBS

Notice what today's experiment proves: the three pages' HTML never changed after you typed them — only the stylesheet did. In a real project that means an HTML overhaul (new sections, new semantics) and a design pass (new colours, new fonts) can happen on different days, by different people, without stepping on each other. External CSS means the restructure and the restyle are separate jobs — you're living the separation of concerns you memorised in Class 9.

ACTIVITY 1 · CODE REVIEW · ~8 MINUTES

Two stylesheets. Identical render. One is a career problem.

Both files below produce pixel-for-pixel the same page — the browser genuinely cannot tell them apart. Your job is the reviewer's job: read both, list every difference that matters to a human, and decide which one you'd accept into poshtik-campus. This is the first activity of the course where the code already works — the question is whether it can be lived with.

SHEET A — AS SUBMITTED

h1,h3{color:seagreen} .dish {background-color: mintcream;border:2px solid #2E8B57; padding:12px;margin:12px 0} body{font-family:'Segoe UI',Arial,sans-serif;color:black; background-color:floralwhite} nav a{text-decoration:none;color:seagreen} #page-header{background-color:darkslategray;color:#FFFFFF; padding:16px;text-align:center} footer p{text-align:center} .dish h3{font-size:18px;font-weight:600}

SHEET B — AS SUBMITTED

/* ===== base ===== */ body { font-family: 'Segoe UI', Arial, sans-serif; background-color: floralwhite; color: black; } /* ===== header & headings ===== */ #page-header { /* … */ } h1, h3 { color: seagreen; } /* ===== menu cards ===== */ .dish { /* … */ } .dish h3 { /* … */ } /* ===== nav & footer ===== */ nav a { /* … */ } footer p { /* … */ }

YOUR REVIEW — FOUR QUESTIONS, IN YOUR NOTEBOOK

Q1

In Sheet A, find the .dish h3 rule and the h1, h3 rule. Time yourself. Now do the same in Sheet B. What made the difference?

Q2

Sheet A writes the brand green as seagreen in one place and #2E8B57 — its exact hex twin — in another (both legal, both identical to the browser). Why does a team still forbid the mixture?

Q3

List every ordering choice Sheet B made that Sheet A didn't. Who benefits from each — the browser or the next developer?

Q4

Verdict: which sheet enters poshtik-campus, and what three rules would you write into a team style guide so every future sheet looks like it?

Write the review first. Judging code you didn't read carefully is the one habit reviewers are paid never to have.

SOLUTION SHEET · ACTIVITY 1

The verdict — and the style guide it produces.

WHAT A REVIEWER SEES

Q1

Sheet B wins the search every time — not because of any one trick, but because related rules sit together under a labelled banner. In A you scan every line; in B you scan four comments, then read one small region.

Q2

The browser treats seagreen and #2E8B57 identically — but Find & Replace doesn't, and neither does a teammate's eye. The day the brand green changes, a mixed-spelling sheet gets half-updated. One spelling per colour, everywhere, is insurance — and this course's spelling is the name.

Q3

B orders base → header → cards → nav/footer (broad to specific, roughly page order), one declaration per line, one blank line between rules, section comments. Every single choice benefits the human. The browser is indifferent to all of them — that's precisely why beginners skip them and professionals never do.

Q4

B enters the repo. A reasonable style guide: 1) group rules under section comments, base styles first; 2) one declaration per line, { and } each on their own line, semicolon always — even before }; 3) one spelling per colour site-wide — named colours (seagreen, mintcream), never a mix of name and hex twin.

The sentence to keep: code is read far more often than it is written — and stylesheets are read most of all, because everyone on a team touches them. Sheet A is a note to yourself; Sheet B is a letter to your team. From today, your style.css is graded as a letter.

GOING DEEPER — WHERE THE SEMICOLON TRAP HIDES

Sheet A also smuggles in a live grenade: it omits the semicolon after the last declaration in several rules. Legal — the closing brace forgives it. But the day someone appends a new declaration after that line without noticing, two declarations fuse and both silently die. That's why style guides demand the "unnecessary" final semicolon: it's not for today's code, it's for tomorrow's edit.

This exact material was examined

PYQ — the role of CSS, plus a styled form. 4 marks, right now.

This question is two jobs stapled together: a theory half (why CSS exists — you've been living the answer since Class 9) and a code half (style a form: centred controls, colours — the form is typed from scratch below, the properties are today's). Model answer builds one point per press, then the code half runs live below the sheet.

PREVIOUS EXAM QUESTION PAPER 4 · Q16(a) 4 MARKS

asked verbatim!Q16(a). Explain the role of CSS in web development. Write CSS to style a form such that its controls are centred and coloured. [4M]

Model answer — role first, then the stylesheet:

1

Role: CSS (Cascading Style Sheets) is the language that controls the presentation of web pages — colours, fonts, alignment, spacing — while HTML carries only the structure and meaning.✓ 1m

2

This separation of concerns lets ONE external stylesheet style many pages at once — a single edit restyles the whole site, giving consistency, smaller pages, and easier maintenance.✓ 1m

3

Centring the form: give the form a fixed width and set margin: 0 auto; — auto side-margins split the leftover space equally, parking the box in the centre. text-align: center; then centres the text inside it.

4

Colouring the controls: select the controls and set background-color, color and a border colour — e.g. input { background-color: mintcream; } and a dark submit button.✓ 2m with working code

✓

Marking logic: 2 marks for the role (definition + separation/reuse point) and 2 for the CSS. Prose about centring earns nothing without the actual margin: 0 auto rule — write the code.

▸

Prove it in one file — form-style.html builds LIVE below, one press per line: a complete order form — HTML included, from scratch — centred and coloured by exactly the rules from points 3 and 4, with the real output growing in sync beside the code.

Why the answer has this shape: "role of CSS" questions reward the two magic phrases — presentation and separation of concerns — plus the one-file-many-pages payoff you physically performed in Part 5. Reciting properties without those phrases caps you at half. The diagram below is the whole theory half in one picture.

The code half, live. One press per line on the left, output growing in sync on the right. Internal CSS is the right call here for the reason Class 9 named: a one-file coding-exam answer.

form-style.html · complete fileONE LINE PER PRESS · OUTPUT GROWS IN SYNC
1<!DOCTYPE html>
2<html lang="en">
3<head>
<title>Styled order form</title>
<style>
  form
  {
    width: 300px;
    margin: 0 auto;  /* CENTRED */
    text-align: center;
    background-color: mintcream;  /* pale mint */
    border: 2px solid seagreen;
    padding: 16px;
  }
  input, select
  {
    background-color: white;  /* COLOURED */
    color: darkslategray;
    border: 1px solid seagreen;
  }
  .submit-btn
  {
    background-color: darkslategray;  /* dark coat */
    color: white;
  }
</style>
27</head>
28<body>
<form>
  <h3>Order Lunch</h3>
  <input type="text" name="student" placeholder="Your name"><br>
  <select name="dish"><option>Ragi Idli Bowl</option></select><br>
  <input type="submit" class="submit-btn" value="Place Order">
</form>
35</body>
36</html>

THIS OUTPUT IS REAL — CENTRED & COLOURED

form-style

file:///C:/Users/student/Desktop/fswd-practice/class-10/form-style.html

Order Lunch

← equal space on both sides: margin: 0 auto at work →

Every mark, on screen: the form box floats dead-centre with equal side gaps (margin: 0 auto on a 300px width), its contents centre-aligned, inputs tinted and bordered in the brand colours, submit button inverted dark. Four rules, four marks.

SAVE THIS AS

FOLDERC:\Users\student\Desktop\fswd-practice\class-10\

FILENAMEform-style.html — the exact 36 lines from the panel; one file, nothing else needed

GIT?No — exam practice lives in the sandbox. Only the continuous project (built in labs) carries commits.

Marks anatomy: 2 for the role (the two magic phrases + one-file-many-pages) and 2 for CSS that actually centres and colours. The 36-line file above is the full-marks code half — and its centring line is the star of the next part, because margin: 0 auto deserves more than a comment.

The technique behind the PYQ

Centring: two different jobs, two different tools.

"Centre it" is the most requested style change in web history — and the most bungled, because it's secretly two requests. Centre the text inside a box? That's text-align: center, from Part 4. Centre the box itself on the page? That's margin: 0 auto — and it only works when the box has a width.

centring-demo.html · complete file, from scratchBUILDS ONE PRESS AT A TIME
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Centring demo</title>
6  <style>
7    #page-header  /* JOB 1 — centre TEXT inside its box */
8    {
9      background-color: darkslategray;
10      color: white;
11      text-align: center;
12    }
13    form  /* JOB 2 — centre the BOX on the page */
14    {
15      width: 300px;      /* without this, auto has no leftover to split */
16      margin: 0 auto;   /* top/bottom 0 · left/right AUTO = equal   */
17      background-color: mintcream;
18      border: 2px solid seagreen;
19      padding: 12px;
20    }
21  </style>
22</head>
23<body>
24  <header id="page-header">Poshtik Campus Menu</header>  <!-- JOB 1's box -->
25  <form>
26    <label for="cust-name">Your name</label>
27    <input type="text" id="cust-name" name="cust-name">  <!-- JOB 2's box -->
28  </form>
29</body>
30</html>
··/* the classic fail: margin: 0 auto with NO width — */
··/* the box already fills the page; nothing to centre */

centring-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-10/centring-demo.html

Poshtik Campus Menu ← full-width box, CENTRED TEXT

Your name ← the 300px form — CENTRED BOX, equal side gaps

Say the mechanism once and own it forever: a box with width: 300px on a wider page has leftover space. margin: 0 auto tells the browser: "split that leftover equally between my left and right margins." Equal margins = centred box. No width → no leftover → auto does nothing.

Honestly flagged — this is the classic technique, not the only one: modern CSS also centres with Flexbox and Grid, which are Class 11's territory alongside the box model (where margin, padding and width get their full anatomy). Exams love the classic because it fits in one line — and it's what your PYQ answer should say.

GOING DEEPER — WHY margin: 0 auto HAS TWO VALUES

margin with two values reads vertical, then horizontal: 0 auto = top & bottom 0, left & right auto. You've already seen the pattern in your .dish rule — margin: 12px 0 spaces cards vertically with nothing sideways. This two-value trick is a shorthand, and shorthands are exactly what tonight's self-study unpacks.

ACTIVITY 2 · BUILD FROM SPEC · ~12 MINUTES

A designer hands you a spec. Write the CSS.

This is the real workflow: designers don't send code, they send specifications — written descriptions of how things must look. Below is the spec for the Poshtik Campus site-wide header and nav bar. Translate every line into CSS, appended to the style.css you built in Part 5 — its three pages already carry the exact header/nav markup the spec styles. Everything required was taught today or in Class 9 — nothing else is needed, or allowed.

DESIGN SPEC · POSHTIK HEADER v1.0

SPEC 1

The page header (id="page-header"): darkslategray background, white text, all text centred, 16px of padding. (Class 9 wrote most of this — keep it; the spec confirms it.)

SPEC 2

The site name inside the header is 28px — but only the header's h1, not any other h1 the site may gain. One selector expresses "h1 inside the header".

SPEC 3

The tagline paragraph inside the header: 14px, and not pure white — use the pale tint honeydew so the site name dominates.

SPEC 4

Nav links: no underline, semi-bold (600). Inside the header's nav they must be white — the seagreen from Part 4 would vanish against the darkslategray background.

RULES

Append to style.css under a new section comment — Activity 1's style guide applies.
Live Server on any page; save after each spec line and watch it land.
Write your selectors before peeking — choosing them is the entire exercise.

WHERE THIS WORK LIVES

FILEstyle.css — the site-wide sheet born in Part 5; this work extends it

FOLDERC:\Users\student\Desktop\fswd-practice\class-10\site\ — Part 5's folder; the sheet grows, the pages obey

GIT?Yes, once it matches the spec — git commit -m "Style site header from design spec".

Build honestly first. Translating a spec is the skill interviews test with "here's a screenshot, make it" — this is your first rep.

SOLUTION SHEET · ACTIVITY 2

The spec, translated — one press per line.

style.css · header section appendedBUILDS ONE LINE PER PRESS
·/* MARKUP THESE RULES STYLE — nothing external needed: a                          */
·/* <header id="page-header"> with an h1, a tagline p and a nav (Home/Menu/About)  */
·/* — the exact block built line-by-line from scratch earlier on this page.        */
41/* ===== header · spec v1.0 ===== */
42#page-header  /* SPEC 1 — already true, kept */
43{
44  background-color: darkslategray;
45  color: white;
46  text-align: center;
47  padding: 16px;
48}
49#page-header h1  /* SPEC 2 */
50{
51  font-size: 28px;
52}
53#page-header p  /* SPEC 3 */
54{
55  font-size: 14px;
56  color: honeydew;  /* pale green-white, readable on the dark coat */
57}
58nav a  /* SPEC 4a — every nav, site-wide */
59{
60  text-decoration: none;
61  font-weight: 600;
62}
63#page-header nav a  /* SPEC 4b */
64{
65  color: white;
66}

THIS OUTPUT IS REAL — THE SPEC, RENDERED

index.html — new header

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

Poshtik Campus

Healthy Food, Healthy Body, Healthy Mind

Home Menu About

Count the Class 9 skills doing today's work: SPEC 2 and 3 are descendant selectors scoping into the header; SPEC 4 is a site-wide rule plus a more specific override for the header's nav — the same two-rules-one-element situation DevTools refereed last class, now used on purpose.

The subtle victory is SPEC 4: the spec sounded like one rule but honest translation needed two — a general rule for all navs and a scoped exception for the header's. Reading a spec and noticing "this is two rules" is the actual skill; the properties were the easy part.

GOING DEEPER — WHY #page-header nav a BEATS nav a

Both rules target the header's links, and the scoped one wins — for the reason Class 9's DevTools activity previewed: the more specific selector takes the prize. An id in the selector outweighs plain elements. You just used specificity deliberately for the first time; the formal scoring system still gets its own class, as promised.

SELF-STUDY · TONIGHT, ~15 MINUTES

Shorthand properties — several declarations in one line.

You've been using shorthands all day without the name: border: 2px solid seagreen is really three properties (width, style, colour) in one; margin: 0 auto is four margins in two values. CSS offers these compressed forms for its most-used property families. Tonight, read two more and try them in your sandbox.

shorthand-try.html · complete file, from scratchBUILDS ONE PRESS AT A TIME
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Shorthand try</title>
6  <style>
7    body  /* the font shorthand — one line… */
8    {
9      font: 600 16px 'Segoe UI', Arial, sans-serif;
10    }
11    /* …equals three longhands: */
12    /* font-weight: 600; font-size: 16px; font-family: 'Segoe UI', Arial, sans-serif; */
13    .dish  /* the background shorthand: */
14    {
15      background: mintcream;  /* = background-color, + more later */
16    }
17  </style>
18</head>
19<body>
20  <p>One line set weight, size and stack.</p>  <!-- the font shorthand's target -->
21  <article class="dish">And this box got its tint from the one-word background.</article>
22</body>
23</html>
··/* trap: font shorthand REQUIRES size + family, in order — */
··/* font: 600 'Segoe UI';  ← silently ignored, no error     */

shorthand-try.html

file:///C:/Users/student/Desktop/fswd-practice/class-10/shorthand-try.html

One line set weight, size and stack. ← the font shorthand

And this box got its tint from the one-word background. ← same render as background-color

Shorthands trade typing for care: fewer lines, but the order and required parts are strict — and mistakes fail silently. Course policy: longhand while learning (it's honest about what changes), shorthands once your eyes read them fluently. DevTools shows every shorthand expanded, which is the fastest way to learn their anatomy.

Tonight's actual task: in your sandbox, write one rule using the font shorthand and confirm in DevTools that it expanded into the three longhands. Then break it on purpose — remove the family — and watch it die without an error message. Ten minutes, and silent-failure debugging stops being scary.

Take it home

Your property kit — the whole class on one card.

PROPERTY	SETS	VALUES YOU KNOW	POSHTIK EXAMPLE
color	Text colour	named (`seagreen`) · hex twin (`#2E8B57`)	`h1, h3 { color: seagreen; }`
background-color	The box behind the content	same two dialects	`body { background-color: floralwhite; }`
font-family	The typeface — via a fallback stack	names + a generic family last	`'Segoe UI', Arial, sans-serif`
font-size	Text size	`px` for now; relative units later	`#page-header h1 { font-size: 28px; }`
font-weight	Text thickness	100–900 · `400` normal · `700` bold	`.dish h3 { font-weight: 600; }`
text-align	Text placement inside its box	`left` · `center` · `right` · `justify`	`footer p { text-align: center; }`
text-decoration	Lines on text — on or off	`none` · `underline` · `line-through`	`nav a { text-decoration: none; }`
margin (preview)	Space outside the box — full story next class	`0 auto` centres a box with a width	`form { width: 300px; margin: 0 auto; }`

YOUR FOLDER AFTER TODAY

fswd-practice\class-10\site\

index.html · typed today · links style.css

menu.html · typed today · links style.css

about.html · typed today · links style.css

style.css ★ BORN TODAY — the site's single wardrobe (+ Activity 2's header spec)

…plus today's demo files · colour · typography · text-control · form-style · centring · shorthand

Four files, one wardrobe — the whole one-file-many-pages mechanism, owned in a sandbox. The continuous project makes this same move in the lab, as a milestone commit there.

Class 10 · closed

Your site has one voice now. Next: the space around everything.

Today you loaded the paint — colours in two dialects, a font stack with a safety net, text placement and ornament — and made the structural move of the unit: ONE style.css dressing every page. Class 11 opens the box model: what padding, margin, border and width really are, why margin: 0 auto needed that width, and how elements get positioned — the properties you previewed today, given their full anatomy.

Before next class: Part 5's experiment finished — three pages + one style.css, all four typed by you, transforming on one save.
Five-minute drill: without notes, write the PYQ's role-of-CSS half — the two magic phrases must appear — then the four-line centred-form CSS, cold.
Self-study: the font-shorthand experiment from Part 10 — build it, break it, watch it fail silently.

Next · Class 11 — the box model & positioning Back · Class 9 All Unit 1 sessions