Bird
Raised Fist0
CSSmarkup~20 mins

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

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which type of CSS is written directly inside an HTML tag using the style attribute?
easy
A. Internal CSS
B. Inline CSS
C. External CSS
D. Embedded CSS

Solution

  1. Step 1: Understand CSS placement types

    Inline CSS is applied directly inside an HTML element using the style attribute.

  2. Step 2: Match the description to the type

    Since the question asks for CSS inside the tag, this matches Inline CSS.

  3. Final Answer:

    Inline CSS -> Option B

  4. Quick Check:

    CSS inside tag = Inline CSS [OK]
Hint: Style attribute inside tag means Inline CSS [OK]
Common Mistakes:
  • Confusing internal CSS with inline CSS
  • Thinking external CSS is inside the tag
  • Mixing embedded CSS term with inline
2. Which of the following is the correct way to include internal CSS in an HTML document?
easy
A. inside the <head> section
B. inside the <body> section
C. inside the <head> section
D.

Solution

  1. Step 1: Identify internal CSS syntax

    Internal CSS uses a <style> tag placed inside the <head> section.

  2. Step 2: Check each option

    <style> p { color: blue; } </style> inside the <head> section correctly uses <style> with CSS inside <head>. Others misuse tags or placement.

  3. Final Answer:

    <style> p { color: blue; } </style> inside the <head> section -> Option A

  4. Quick Check:

    Internal CSS = <style> in <head> [OK]
Hint: Internal CSS uses <style> in the head section [OK]
Common Mistakes:
  • Placing <link> inside body for internal CSS
  • Using <script> tag for CSS
  • Using <style> with src attribute
3. What will be the color of the paragraph text in this HTML snippet?
<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p style="color: blue;">Hello World</p>
</body>
medium
A. Black (default)
B. Red
C. Blue
D. No color applied

Solution

  1. Step 1: Identify CSS types and priority

    The paragraph has internal CSS setting color red and inline CSS setting color blue.

  2. Step 2: Understand CSS specificity

    Inline CSS has higher priority than internal CSS, so the color blue applies.

  3. Final Answer:

    Blue -> Option C

  4. Quick Check:

    Inline CSS overrides internal CSS [OK]
Hint: Inline CSS overrides internal CSS color [OK]
Common Mistakes:
  • Thinking internal CSS overrides inline
  • Assuming default color applies
  • Ignoring CSS specificity rules
4. Find the error in this HTML snippet that tries to link an external CSS file:
<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    body { background-color: white; }
  </style>
</head>
medium
A. External CSS file name is incorrect
B. Missing closing slash in <link> tag
C. The <style> tag should be outside <head>
D. No error, code is correct

Solution

  1. Step 1: Check <link> tag syntax

    In HTML5, <link> is a void element and does not require a self-closing slash. <link rel="stylesheet" href="styles.css"> is valid.

  2. Step 2: Verify other elements

    The <style> tag is correctly placed inside <head>. File name and everything else is fine. No errors.

  3. Final Answer:

    No error, code is correct -> Option D

  4. Quick Check:

    <link> without / is valid HTML5 [OK]
Hint: <link> tag does not need self-closing slash in HTML5 [OK]
Common Mistakes:
  • Thinking <link> requires closing slash
  • Thinking <style> should be outside <head>
  • Assuming file name error without checking
5. You want to style multiple HTML pages with the same CSS rules and also override some styles on a single page. Which combination is best?
hard
A. Use external CSS for common styles and inline CSS for page-specific overrides
B. Use only inline CSS on every page
C. Use internal CSS on every page and no external CSS
D. Use external CSS for all styles and never override

Solution

  1. Step 1: Understand CSS reuse and overrides

    External CSS is best for common styles shared across pages for easy maintenance.

  2. Step 2: Use inline CSS for specific overrides

    Inline CSS can override external styles on a single element for page-specific changes.

  3. Final Answer:

    Use external CSS for common styles and inline CSS for page-specific overrides -> Option A

  4. Quick Check:

    External CSS + inline overrides = best practice [OK]
Hint: External CSS for all, inline CSS for exceptions [OK]
Common Mistakes:
  • Using only inline CSS everywhere (hard to maintain)
  • Avoiding overrides when needed
  • Using internal CSS on every page (redundant)