HTML vs CSS: structure vs style
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which language controls the colour and font of text on a webpage?
2. Which language uses tags like <h1>, <p>, and <div>?
3. Which file would you use to change a heading's font size?
4. True or false: HTML and CSS are the same language.
5. Which tag connects an HTML file to an external CSS stylesheet?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<h1>Hello</h1> | AHTML structure - defines a top-level heading as page content | |
| 2h1 { color: blue; } | B<p>This is a paragraph.</p> | |
| 3HTML defines what content is on the page, not how it looks | Cp { font-size: 18px; } | |
| 4CSS controls visual appearance like colour, size, and layout | DHTML tags must never appear inside CSS rule blocks - only property-value pairs belong there | |
| 5<p color="red">Text</p> | ECSS style rule - sets the text colour of all h1 elements | |
| 6h1 { <p>Hello</p> } | Fcolor is a CSS property, not an HTML attribute - use CSS to style colour |
C
Definitions
HTML
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<___>My Heading</h1>
2.
<p>Welcome</___>
3.
___ { color: red; }
4.
<link rel="stylesheet" href="___">
5.
<___>
<h1>Title</h1>
</body>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<!DOCTYPE html>
B
<html>
C
<style>
D
<h1>Hello</h1>
E
</html>
Question 2
A
h1 {
B
color: blue;
C
}
D
<h1>Hello</h1>
Question 3
A
<head>
B
<link rel="stylesheet" href="style.css">
C
</head>
D
<body>
E
<p>Hello</p>
F
</body>
Question 4
A
<body>
B
<h1 color="red">Title</h1>
C
<p>Some text</p>
D
</body>
Question 5
A
<!DOCTYPE html>
B
<html>
C
<head></head>
D
<body>
E
<div>Content</div>
F
<html>
Answer Key
HTML vs CSS: structure vs style
Section A: Quick Questions
Q1
B — CSS
Q2
A — HTML
Q3
B — style.css
Q4
A — False
Q5
A — <link>
Section B: Match the Pairs
Q1
<h1>Hello</h1> → HTML structure - defines a top-level heading as page content
Q2
h1 { color: blue; } → CSS style rule - sets the text colour of all h1 elements
Q3
HTML defines what content is on the page, not how it looks → <p>This is a paragraph.</p>
Q4
CSS controls visual appearance like colour, size, and layout → p { font-size: 18px; }
Q5
<p color="red">Text</p> → color is a CSS property, not an HTML attribute - use CSS to style colour
Q6
h1 {
<p>Hello</p>
} → HTML tags must never appear inside CSS rule blocks - only property-value pairs belong there
Section C: Definitions
Q1
HTML — The language that defines the structure and content of a webpage using tags and elements, not appearance.Section D: Fill in the Blanks
Q1
<h1>My Heading</h1>Q2
<p>Welcome</p>Q3
h1 { color: red; }Q4
<link rel="stylesheet" href="style.css">Q5
<body>
<h1>Title</h1>
</body>Section E: Spot the Error
Q1
C — The <style> tag belongs inside <head>, not wrapping page content. Visible content should be inside <body>, not <style>.
Q2
D — HTML elements cannot appear inside a CSS file. The <h1> tag belongs in an HTML file, not mixed into CSS rules.
Q3
A — If <head> were missing or misspelled, the browser could not parse the document head correctly. The <link> to a stylesheet must sit inside a valid <head> element.
Q4
B — color is a CSS property, not an HTML attribute. To style colour, use CSS: h1 { color: red; } rather than putting it inside the HTML tag.
Q5
F — The closing tag must be </html> with a forward slash. Without the slash it is an opening tag, not a closing tag.