0
0
CSSmarkup~20 mins

Linking CSS to HTML - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
CSS Linking Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate
2:00remaining
What is the correct way to link an external CSS file in HTML?
Choose the option that correctly links a CSS file named styles.css in the HTML <head> section.
CSS
<head>
  <!-- Link CSS here -->
</head>
A<script src="styles.css"></script>
B<style src="styles.css"></style>
C<link rel="stylesheet" href="styles.css">
D<link href="styles.css" rel="script">
Attempts:
2 left
💡 Hint
The <link> tag is used for external CSS files and needs a relationship attribute.
🧠 Conceptual
intermediate
2:00remaining
What happens if you use the wrong attribute to link CSS?
If you write <link href="styles.css" rel="script"> in your HTML, what will happen?
CSS
<head>
  <link href="styles.css" rel="script">
</head>
AThe CSS file will not load and styles won't apply.
BThe CSS file will load and styles will apply correctly.
CThe browser will treat it as a JavaScript file and run it.
DThe browser will show a syntax error and stop rendering.
Attempts:
2 left
💡 Hint
The rel attribute tells the browser what kind of file it is.
❓ rendering
advanced
2:00remaining
What visual result will this HTML and CSS produce?
Given the HTML and CSS below, what color will the paragraph text appear in the browser?
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Test</title>
</head>
<body>
  <p>Hello world!</p>
</body>
</html>

/* styles.css content */
p { color: blue; }
AThe paragraph text will be blue.
BThe paragraph text will be black (default).
CThe paragraph text will be red.
DThe paragraph text will not appear.
Attempts:
2 left
💡 Hint
The CSS file sets the paragraph color to blue.
❓ selector
advanced
2:00remaining
Which CSS selector will style only paragraphs inside a <section>?
You want to style only <p> elements that are inside a <section> element. Which selector should you use in your CSS?
Asection > p { color: green; }
Bsection p { color: green; }
Cp section { color: green; }
Dp > section { color: green; }
Attempts:
2 left
💡 Hint
Think about the order and relationship between elements in selectors.
❓ accessibility
expert
3:00remaining
How to ensure linked CSS does not reduce accessibility?
When linking an external CSS file, which practice helps maintain good accessibility for users with visual impairments?
AUse only light colors and small fonts for a sleek look.
BDisable keyboard navigation styles to simplify design.
CAvoid using semantic HTML since CSS controls appearance.
DUse high contrast colors and ensure styles do not hide content.
Attempts:
2 left
💡 Hint
Accessibility means everyone can use your site easily, including those with vision challenges.