Building a simple page with HTML and CSS together

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A bird-watch page is built in two files. Which file holds the headings, list, image and link?

A The CSS file (style.css)

B The HTML file (index.html)

2. Where should the link to the stylesheet go?

A Inside the head: <link rel="stylesheet" href="style.css">

B At the bottom of style.css

3. Which line correctly connects the bird-watch page to its CSS file?

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

B <link rel="stylesheet" src="style.css">

4. Which rule belongs in style.css?

A <h1>Bird Watch</h1>

B h1 { color: darkgreen; }

5. You add a new rule to style.css, but the page still looks the same. What should you do first?

A Save the CSS file and refresh the browser

B Delete the HTML file and start again

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">		AThe href says styles.css but the file is named style.css, so the browser cannot find it and the page stays unstyled.
2h1 { color: darkgreen; }		BThe link element is placed in the body. It belongs in the head so the stylesheet loads for the page.
3Write the HTML structure first: a heading, a list of birds and a link, all inside the body		CA CSS rule in style.css that makes every main heading on the bird-watch page dark green
4Add one CSS rule at a time to style.css, then refresh the browser to see the change		D<body><h1>Bird Watch</h1><ul><li>Magpie</li></ul><a href="https://birdlife.org.au">BirdLife</a></body>
5<body><link rel="stylesheet" href="style.css"></body>		Eimg { width: 300px; }
6<head><link rel="stylesheet" href="styles.css"></head>		FConnects the HTML file to the CSS file style.css so its rules style the page

Definitions

Fill in the Blanks

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

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

___ { width: 300px; }

<li class="____">Gouldian Finch</li> .rare { color: crimson; }

Spot the Error

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

Question 1

A <head>

B <link rel="stylesheet"

C src="style.css">

D </head>

Question 2

A h1 {

B color: darkgreen;

C }

D .img {

E width: 200px;

F }

Question 3

A <body>

B <h1>Backyard Bird Watch</h2>

C <p>Birds I spotted today:</p>

Question 4

A <header>

B <title>Bird Watch</title>

C <link rel="stylesheet"

D href="style.css">

E </head>

Question 5

A ul {

B list-style: square;

C color: #2e6b3a;

D margin-left: 20px,

E }

Answer Key

Building a simple page with HTML and CSS together

Section A: Quick Questions

B — The HTML file (index.html)

A — Inside the head: <link rel="stylesheet" href="style.css">

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

B — h1 { color: darkgreen; }

A — Save the CSS file and refresh the browser

Section B: Match the Pairs

h1 { color: darkgreen; } → A CSS rule in style.css that makes every main heading on the bird-watch page dark green

Write the HTML structure first: a heading, a list of birds and a link, all inside the body → <body><h1>Bird Watch</h1><ul><li>Magpie</li></ul><a href="https://birdlife.org.au">BirdLife</a></body>

Add one CSS rule at a time to style.css, then refresh the browser to see the change → img { width: 300px; }

<body><link rel="stylesheet" href="style.css"></body> → The link element is placed in the body. It belongs in the head so the stylesheet loads for the page.

<head><link rel="stylesheet" href="styles.css"></head> → The href says styles.css but the file is named style.css, so the browser cannot find it and the page stays unstyled.

Section C: Definitions

<link rel="stylesheet" href="style.css"> — Placed in the head of the HTML file, it connects the page to style.css, so the CSS rules in that second file style the content and structure written in the HTML file.

Section D: Fill in the Blanks

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

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

img {
  width: 300px;
}

<li class="rare">Gouldian Finch</li>
.rare { color: crimson; }

Section E: Spot the Error

C — A link tag finds the CSS file with the href attribute, not src. Line 3 should be href="style.css">. Without href the browser never loads the stylesheet.

D — A dot at the start means a class selector, so this rule would only match class="img". To style every <img> element the selector must be plain img, with no dot.

B — The closing tag must match the opening tag. This heading opens with <h1> so it must close with </h1>, not </h2>.

A — The stylesheet link and the title go inside <head>, which matches the </head> closing tag. <header> is a different element for the visible top of the page. Line 1 should be <head>.

D — Each CSS declaration ends with a semicolon, not a comma. Line 4 should be margin-left: 20px; so the browser reads it correctly.