Restyling one document with a different stylesheet

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. You swap light.css for dark.css in the link tag and leave the HTML content alone. What changes?

A How the page looks (colours, fonts) changes, but the content stays the same

B The words and headings on the page change to new content

2. Which line restyles the page with a different stylesheet without touching the content?

A <link rel="stylesheet" href="dark.css">

B <p style="dark.css">

3. You edit one rule in styles.css: h1 { color: green; }. Your site has 10 pages that all link to styles.css. What happens?

A Every h1 on all 10 pages turns green

B Only the h1 on the page you were looking at turns green

4. After swapping the stylesheet, how can you check that the HTML did not change?

A You must rewrite every heading and paragraph so they match the new style

B The only edit was the href in the link tag, so the HTML elements and text are identical

5. A student says: "To make my page look different, I have to rewrite my HTML." Is this true or false?

A True: the HTML decides every colour and font, so it must be rewritten

B False: you can change the CSS file and leave the HTML untouched

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="dark.css">		Ah1 { color: crimson; }
2<link rel="stylesheet" href="light.css">		BEditing the HTML content to change the look is the wrong approach. Restyling should only change the CSS file, not the content.
3Edit one rule in a shared stylesheet and every page that uses it is restyled, with no HTML edits.		CSwaps the page over to the light.css stylesheet, so the same HTML looks different.
4To check the content and structure did not change, the HTML file stays exactly the same while only the CSS file is swapped.		DLoads the dark.css stylesheet so the page gets a dark look, with no change to the content or structure.
5<h1 style="color: red;">Our School Trip</h1>		EPutting the style inside the HTML mixes presentation into the content, so swapping the stylesheet will not change this heading.
6<link rel="stylesheet" href="dark.css"> (edit the h1 text to restyle)		F<h1>Our School Trip</h1>

Definitions

Fill in the Blanks

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

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

__ { color: navy; font-size: 32px; }

body { __________: black; }

Spot the Error

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

Question 1

A <head>

B <link rel="stylesheet"

C src="dark.css">

D </head>

Question 2

A body {

B background: #fff;

C }

D h1 ( color: navy; )

Question 3

A <head>

B <title>Menu</title>

C <link rel="stylesheet"

D href="dark.css>

Question 4

A /* shared by every page */

B p {

C font-family; Arial;

D }

Question 5

A <body>

B <h1>Our Team</h1>

C <p class="intro">Welcome!<p>

D </body>

Answer Key

Restyling one document with a different stylesheet

Section A: Quick Questions

A — How the page looks (colours, fonts) changes, but the content stays the same

A — <link rel="stylesheet" href="dark.css">

A — Every h1 on all 10 pages turns green

B — The only edit was the href in the link tag, so the HTML elements and text are identical

B — False: you can change the CSS file and leave the HTML untouched

Section B: Match the Pairs

Edit one rule in a shared stylesheet and every page that uses it is restyled, with no HTML edits. → h1 { color: crimson; }

To check the content and structure did not change, the HTML file stays exactly the same while only the CSS file is swapped. → <h1>Our School Trip</h1>

<h1 style="color: red;">Our School Trip</h1> → Putting the style inside the HTML mixes presentation into the content, so swapping the stylesheet will not change this heading.

Section C: Definitions

<link rel="stylesheet" href="dark.css"> — Change which stylesheet this tag points to and the same HTML looks totally different, because presentation lives in the CSS file, not in the content.

Section D: Fill in the Blanks

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

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

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

h1 { color: navy; font-size: 32px; }

body {
  background: black;
}

Section E: Spot the Error

C — A link tag uses href, not src, to point to the stylesheet file. Without href the browser cannot load dark.css, so the presentation will not change. It should be href="dark.css">.

D — CSS rules use curly braces { }, not round brackets. Without them the rule is ignored and the heading will not be restyled. It should be h1 { color: navy; }.

D — The href value is missing its closing quote. The browser may misread the tag and fail to load the stylesheet. It should be href="dark.css">.

C — A CSS declaration needs a colon between the property and its value, not a semicolon. Written correctly, one edit here restyles every page that uses this file. It should be font-family: Arial;.

C — The paragraph is closed with <p>, which opens a new paragraph. A closing tag needs a slash. The HTML structure should stay the same when you swap stylesheets, so it should end with </p>.