Inline, internal and external CSS
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which code is an inline style?
2. Where does an internal style element normally go?
3. Which way of adding CSS lets many pages share one set of styles?
4. Which method fully separates presentation from structure?
5. Which tag links an external 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<p style="color: red;">Hi</p> | A<style> p { color: blue; } </style> | |
| 2<link rel="stylesheet" href="style.css"> | BThe CSS is written as the paragraph text instead of inside the style attribute value. It should be <p style="color: red;">. | |
| 3Internal CSS puts the rules in a style element inside the head of one page | CThe style element sits in the body, not the head. Internal CSS belongs inside head. Also, this CSS is not in an external file, so it cannot be shared by other pages. | |
| 4Inline CSS mixes presentation into the structure because the styling sits inside the tag | D<h1 style="font-size: 40px;">Menu</h1> | |
| 5<p style>color: red;</p> | EExternal CSS: links a separate .css file so many pages can share one stylesheet | |
| 6<body> <style>p { color: red; }</style> </body> | FInline CSS: the style attribute applies a style to this one element only |
C
Definitions
<link rel="stylesheet" href="style.css">
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<p _____="color: red;">Hello</p>
2.
<____>
<style>p { color: blue; }</style>
</head>
3.
<link rel="__________" href="style.css">
4.
<link rel="stylesheet" ____="style.css">
5.
<head>
<____ rel="stylesheet" href="style.css">
</head>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<head>
B
<title>Home</title>
C
<link rel="stylesheet"
D
src="style.css">
E
</head>
Question 2
A
<head>
B
<style>
C
p { color: red; }
D
<style>
E
</head>
Question 3
A
<body>
B
<p style="color= red;">Hi</p>
C
<p>Bye</p>
D
</body>
Question 4
A
/* style.css */
B
p {
C
color = blue;
D
}
Question 5
A
<styles>
B
h1 { color: blue; }
C
p { color: green; }
D
</style>
Answer Key
Inline, internal and external CSS
Section A: Quick Questions
Q1
A — <p style="color: red;">Hi</p>
Q2
B — Inside the <head> of the page
Q3
B — An external .css file
Q4
A — External stylesheet
Q5
A — <link rel="stylesheet" href="style.css">
Section B: Match the Pairs
Q1
<p style="color: red;">Hi</p> → Inline CSS: the style attribute applies a style to this one element only
Q2
<link rel="stylesheet" href="style.css"> → External CSS: links a separate .css file so many pages can share one stylesheet
Q3
Internal CSS puts the rules in a style element inside the head of one page → <style>
p { color: blue; }
</style>
Q4
Inline CSS mixes presentation into the structure because the styling sits inside the tag → <h1 style="font-size: 40px;">Menu</h1>
Q5
<p style>color: red;</p> → The CSS is written as the paragraph text instead of inside the style attribute value. It should be <p style="color: red;">.
Q6
<body>
<style>p { color: red; }</style>
</body> → The style element sits in the body, not the head. Internal CSS belongs inside head. Also, this CSS is not in an external file, so it cannot be shared by other pages.
Section C: Definitions
Q1
<link rel="stylesheet" href="style.css"> — Adds an external CSS file. Inline uses style=, internal uses <style>, but only this external link lets many pages share one stylesheet and fully separates presentation from structure.Section D: Fill in the Blanks
Q1
<p style="color: red;">Hello</p>Q2
<head>
<style>p { color: blue; }</style>
</head>Q3
<link rel="stylesheet" href="style.css">Q4
<link rel="stylesheet" href="style.css">Q5
<head>
<link rel="stylesheet" href="style.css">
</head>Section E: Spot the Error
Q1
D — A link element finds the external CSS file with the href attribute, not src. It should be href="style.css">.
Q2
D — An internal stylesheet must be closed with a closing tag. Line 4 should be </style>, not a second opening <style>.
Q3
B — Inline CSS inside a style attribute uses property: value, with a colon. It should be style="color: red;".
Q4
C — A CSS declaration in an external file is written property: value;. The equals sign should be a colon: color: blue;.
Q5
A — An internal stylesheet goes in a <style> element. The tag name is style, not styles, so it should be <style>.