Adding CSS to HTML
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which element connects an external CSS file to an HTML page?
2. Where must <link> and <style> elements be placed?
3. Which CSS method has the highest specificity?
4. True or false: the rel attribute on <link> must be 'stylesheet' to load CSS.
5. Which approach is best for styling multiple HTML pages consistently?
B
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="main.css"> | AInline CSS — the style attribute applies CSS to this single element and has the highest specificity | |
| 2<p style="color: red;">Hello</p> | BTag names must be lowercase — <Style> and </Style> should be <style> and </style> | |
| 3External stylesheets are preferred — one CSS file can be shared across multiple HTML pages | CConnects an external CSS file — rel must be 'stylesheet' and href provides the file path | |
| 4<style> in <head> embeds CSS rules directly inside the HTML document | D<link rel="stylesheet" href="style.css"> | |
| 5<Style> p { color: blue; } </Style> | EThe href attribute is missing — without href the browser has no file to load | |
| 6<link rel="stylesheet"> | F<style> body { background: white; } p { color: navy; } </style> |
C
Definitions
<link>
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<_____>
p { color: red; }
</style>
2.
<____ rel="stylesheet" href="main.css">
3.
<link rel="__________" href="app.css">
4.
<link rel="stylesheet" ____="style.css">
5.
<p _____="color: blue;">Hello</p>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<Style>
B
p { color: red; }
C
</style>
Question 2
A
<head>
B
<link rel="stylesheet" href=styles.css>
C
<title>My Page</title>
D
</head>
Question 3
A
<head>
B
<title>Page</title>
C
<link rel=stylesheet href="main.css">
D
</head>
Question 4
A
<head>
B
<title>Page</title>
C
<style>
D
</Style>
E
</head>
Question 5
A
<html>
B
<head><title>Page</title></head>
C
<body>
D
<p style=color:red>Hello</p>
E
</body>
F
</html>
Answer Key
Adding CSS to HTML
Section A: Quick Questions
Q1
A — <link>
Q2
B — Inside the <head> element
Q3
A — Inline style attribute
Q4
A — True
Q5
B — External stylesheet with <link>
Section B: Match the Pairs
Q1
<link rel="stylesheet" href="main.css"> → Connects an external CSS file — rel must be 'stylesheet' and href provides the file path
Q2
<p style="color: red;">Hello</p> → Inline CSS — the style attribute applies CSS to this single element and has the highest specificity
Q3
External stylesheets are preferred — one CSS file can be shared across multiple HTML pages → <link rel="stylesheet" href="style.css">
Q4
<style> in <head> embeds CSS rules directly inside the HTML document → <style>
body { background: white; }
p { color: navy; }
</style>
Q5
<Style>
p { color: blue; }
</Style> → Tag names must be lowercase — <Style> and </Style> should be <style> and </style>
Q6
<link rel="stylesheet"> → The href attribute is missing — without href the browser has no file to load
Section C: Definitions
Q1
<link> — A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.Section D: Fill in the Blanks
Q1
<style>
p { color: red; }
</style>Q2
<link rel="stylesheet" href="main.css">Q3
<link rel="stylesheet" href="app.css">Q4
<link rel="stylesheet" href="style.css">Q5
<p style="color: blue;">Hello</p>Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <Style> should be written as <style>.
Q2
B — The href attribute value must be in double quotes: href="styles.css", not href=styles.css without quotes.
Q3
C — The rel attribute value must be in double quotes: rel="stylesheet", not rel=stylesheet without quotes.
Q4
D — HTML tag names must be lowercase. </Style> should be written as </style>.
Q5
D — The inline style attribute value must be in double quotes: style="color:red;", not style=color:red without quotes.