Explaining why content is separated from presentation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which explanation is complete: it names the benefit, gives an example and says why?

A Separating HTML from CSS is good because it is how web developers do things.

B Separating HTML from CSS means one rule change restyles every page, because the look is stored in one stylesheet.

2. A school site has 50 pages linked to one stylesheet. The designer changes the h1 colour in that stylesheet. What happens?

A All 50 pages show the new heading colour without any HTML being edited.

B Only one page changes, so the designer must edit all 50 HTML files by hand.

3. Which sentence uses 'because' to link a point to its reason correctly?

A Pages look consistent because they all share the same external stylesheet.

B Pages look consistent because they all have different colours in each file.

4. How can the same HTML content show two different designs?

A Rewrite all the text in the HTML for each design.

B Link the same HTML to a different CSS stylesheet.

5. Which is the best reason separation makes updates efficient?

A A design change is made once in the CSS, not repeated on every page.

B Every page must be edited one at a time so the design stays safe.

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<link rel="stylesheet" href="style.css">		AOne CSS rule that restyles every h1 on every linked page without any change to the HTML content.
2h1 { color: navy; }		BThis puts presentation inside the content, so the design cannot be changed in one place and the HTML gets harder to update.
3The same HTML content can get a different design just by swapping the stylesheet, because the content does not hold any style.		Cbody { font-family: Arial; background-color: white; }
4A whole site keeps a consistent look because every page shares one rule, so the colours and fonts always match.		D<link rel="stylesheet" href="dark.css">
5<p style="color: red;">Sale</p> <p style="color: red;">Offer</p>		ELinks a page to one shared stylesheet, so many pages can use the same look and one CSS change updates them all.
6<font color="blue">Welcome</font>		FStyle is mixed into the content and repeated on each paragraph, so changing the colour means editing every tag instead of one CSS rule.

Definitions

separation of content and presentation

Fill in the Blanks

Complete each line of code by filling in the missing parts.

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

__ { color: navy; }

<p _____="note">Exam on Friday</p>

.note { ________________: yellow; }

h1 { color: navy; __________: center; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A /* style.css - shared */

B h1 ( color: navy; )

C p { font-size: 1.2em; }

Question 2

A <h1 class="title">Our Club<h1>

B <p>Welcome to our page.</p>

C <p>Meet on Fridays.</p>

Question 3

A .title {

B color: navy;

C font-size: 2em;

D padding: 10px:

E }

Question 4

A <h2 class="sub">Events</h2>

B <p style="color:red">Quiz</p>

C <p class="note">Art</p>

Question 5

A .note {

B color: green;

C font-size: 18;

D }

Answer Key

Explaining why content is separated from presentation

Section A: Quick Questions

B — Separating HTML from CSS means one rule change restyles every page, because the look is stored in one stylesheet.

A — All 50 pages show the new heading colour without any HTML being edited.

A — Pages look consistent because they all share the same external stylesheet.

B — Link the same HTML to a different CSS stylesheet.

A — A design change is made once in the CSS, not repeated on every page.

Section B: Match the Pairs

h1 { color: navy; } → One CSS rule that restyles every h1 on every linked page without any change to the HTML content.

The same HTML content can get a different design just by swapping the stylesheet, because the content does not hold any style. → <link rel="stylesheet" href="dark.css">

A whole site keeps a consistent look because every page shares one rule, so the colours and fonts always match. → body { font-family: Arial; background-color: white; }

<p style="color: red;">Sale</p> <p style="color: red;">Offer</p> → Style is mixed into the content and repeated on each paragraph, so changing the colour means editing every tag instead of one CSS rule.

<font color="blue">Welcome</font> → This puts presentation inside the content, so the design cannot be changed in one place and the HTML gets harder to update.

Section C: Definitions

separation of content and presentation — Keeping HTML content apart from CSS style means one CSS rule can restyle every page without touching the content, because the look is stored in one place.

Section D: Fill in the Blanks

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

h1 { color: navy; }

<p class="note">Exam on Friday</p>

.note { background-color: yellow; }

h1 { color: navy; text-align: center; }

Section E: Spot the Error

B — A CSS rule must wrap its declarations in curly braces { }, not round brackets. It should be h1 { color: navy; }. When this shared stylesheet is correct, one rule restyles every page that uses it without touching the content.

A — The closing tag is missing its slash. It should be </h1>. The content must be written correctly in HTML so that a separate CSS file can style it.

D — A CSS declaration ends with a semicolon, not a colon. It should be padding: 10px;. Without it the style may fail, so the design would break on every page that uses this rule.

B — Inline style mixes presentation into the content. It should use class="note" so the look lives in the CSS. Then one change to the .note rule restyles every note on every page.

C — A font-size needs a unit such as px or em. It should be font-size: 18px;. Fixing one value in this rule updates every element with the note class.