Fixing common HTML and CSS mistakes

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A student writes <p>Welcome to my page. and never closes the paragraph. What is the fault?

A Unclosed tag: it needs </p> at the end

B Wrong class name: it needs a class attribute

2. Which CSS rule is written correctly?

A p { color: blue; }

B p { color: blue

3. The CSS says .menu { color: red; } but the HTML has <nav class="mnu">. Why does the style not apply?

A The class name is misspelt, so it does not match .menu

B The nav element cannot have a class attribute

4. Which line has a missing semicolon problem?

A h1 { color: red; font-size: 2em; }

B h1 { color: red font-size: 2em; }

5. Your CSS file is called style.css in the same folder as your page, but the page does not look styled. Which link tag is likely the fault?

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

B <link rel="stylesheet" href="styles.css">

Match the Pairs

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

Left column		Right column
1<p>Welcome to my page		AThe closing brace is missing, so the rule is never closed and later rules may fail. Add } at the end.
2<link rel="stylesheet" href="styles/main.css">		BLoads a stylesheet from a file path, which must match the real folder and file name or no styling is applied
3A CSS declaration must end with a semicolon and the rule must be closed with a brace		C<p class="note"> with .note { color: red; }
4The class name in the HTML must match the class selector in the CSS exactly, including spelling		DThe closing quote after cat.jpg is missing, so the attribute value runs on and the tag is read wrongly. Add the quote after cat.jpg.
5<img src="cat.jpg alt="A cat">		Ep { color: blue; }
6h1 { color: green; background-color: yellow;		FThe paragraph has no closing tag, so the browser may treat the following content as part of the paragraph

Definitions

debugging

Fill in the Blanks

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

<p>Welcome to my page</_>

<p class="note">Check this</p> .____ { color: red; }

h1 { color: navy; _________: 32px; }

p { _____: green; }

Spot the Error

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

Question 1

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

B <h1>My Page</h1>

C <p>Welcome!</p>

Question 2

A p {

B color: green;

C margin: 8px

D padding: 4px;

E }

Question 3

A <ul>

B <li>Apples</li>

C <li>Pears</li>

D <li>Plums

E </ul>

Question 4

A <div class="box">One</div>

B <div class="box">Two</div>

C <div class="bax">Three</div>

D <style>.box { color: red; }</style>

Question 5

A h1 {

B color: red;

C }

D p { color: gray;

E h2 { color: blue; }

Answer Key

Fixing common HTML and CSS mistakes

Section A: Quick Questions

A — Unclosed tag: it needs </p> at the end

A — p { color: blue; }

A — The class name is misspelt, so it does not match .menu

B — h1 { color: red font-size: 2em; }

B — <link rel="stylesheet" href="styles.css">

Section B: Match the Pairs

<p>Welcome to my page → The paragraph has no closing tag, so the browser may treat the following content as part of the paragraph

A CSS declaration must end with a semicolon and the rule must be closed with a brace → p { color: blue; }

The class name in the HTML must match the class selector in the CSS exactly, including spelling → <p class="note"> with .note { color: red; }

<img src="cat.jpg alt="A cat"> → The closing quote after cat.jpg is missing, so the attribute value runs on and the tag is read wrongly. Add the quote after cat.jpg.

h1 { color: green; background-color: yellow; → The closing brace is missing, so the rule is never closed and later rules may fail. Add } at the end.

Section C: Definitions

debugging — Finding and fixing small slips in code, such as a missing closing tag, quote, semicolon or brace, or a class name that does not match. Check your code against the rules to spot each one.

Section D: Fill in the Blanks

<p>Welcome to my page</p>

<p class="note">Check this</p>
.note { color: red; }

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

p {
  color: green;
}

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

Section E: Spot the Error

A — The href has the wrong file path. The stylesheet is called style.css, so the browser cannot find style.cs and no styles load. Check the Network or Sources tab in Inspect for a failed file. It should be href="style.css".

C — The margin declaration is missing its semicolon. Without it the browser joins it to the padding line and may ignore both. It should be margin: 8px;

D — The last list item is missing its closing tag. Every <li> needs a matching </li>. It should be <li>Plums</li>.

C — The class name is misspelt. The CSS rule targets .box, so class="bax" does not match and this div is not styled. It should be class="box".

D — The closing brace is missing, so the rule is never closed and the next rule can break too. It should be p { color: gray; }