0
0
CSSmarkup~20 mins

Inline, internal, and external CSS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
CSS Styling Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
Difference in CSS application methods
Which CSS method applies styles directly inside an HTML tag and overrides other styles?
AInternal CSS using <style> tags in the <head>
BExternal CSS linked via <link> tag
CCSS written inside a separate JavaScript file
DInline CSS using the style attribute inside an HTML element
Attempts:
2 left
💡 Hint
Think about where the style is written closest to the element itself.
📝 Syntax
intermediate
2:00remaining
Correct syntax for internal CSS
Which option shows the correct way to write internal CSS inside an HTML document?
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<!-- CSS goes here -->
</head>
<body>
<p>Hello World</p>
</body>
</html>
A<script> p { color: blue; } </script>
B<style> p { color: blue; } </style>
C<link rel="stylesheet" href="styles.css">
D<style src="styles.css"> p { color: blue; } </style>
Attempts:
2 left
💡 Hint
Internal CSS uses <style> tags inside the <head>.
❓ rendering
advanced
2:00remaining
Visual result of conflicting CSS styles
Given this HTML and CSS, what color will the paragraph text be when rendered in the browser? HTML: <p style="color: green;">Hello</p> Internal CSS: <style> p { color: red; } </style> External CSS: /* styles.css */ p { color: blue; }
AGreen
BRed
CBlack (default)
DBlue
Attempts:
2 left
💡 Hint
Remember the priority order: inline > internal > external.
❓ selector
advanced
2:00remaining
Which CSS selector applies styles only in external CSS?
You want to style all paragraphs with class "highlight" only using external CSS. Which selector should you use in your external stylesheet?
Ap.highlight { background-color: yellow; }
B<p class="highlight" style="background-color: yellow;">
Cstyle="background-color: yellow;"
D#highlight { background-color: yellow; }
Attempts:
2 left
💡 Hint
External CSS uses selectors, not inline attributes.
❓ accessibility
expert
3:00remaining
Accessibility impact of inline styles
Which statement about inline CSS and accessibility is true?
AInline CSS automatically improves accessibility by adding ARIA labels.
BInline CSS disables keyboard navigation on the page.
CInline CSS can make it harder to maintain consistent styles, which may confuse users relying on assistive technologies.
DInline CSS ensures all users see the same colors regardless of their settings.
Attempts:
2 left
💡 Hint
Think about how style consistency affects users with screen readers or other aids.