0
0
CSSmarkup~20 mins

Inline vs external precedence in CSS - Practice Questions

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
CSS Precedence Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
Which CSS rule has the highest precedence?
Consider a paragraph with the following CSS rules applied:

1. An external stylesheet sets color: blue;.
2. An internal <style> block sets color: green;.
3. An inline style sets color: red;.

What color will the paragraph text be?
CSS
<p style="color: red;">This is a test paragraph.</p>
ABlue, because external stylesheets load first.
BGreen, because internal styles override external styles.
CBlack, because browser default styles override all.
DRed, because inline styles have the highest precedence.
Attempts:
2 left
💡 Hint
Think about where the style is written and how CSS decides which rule to use.
📝 Syntax
intermediate
2:00remaining
What color will this paragraph be?
Given this HTML and CSS:

<p id="text" style="color: orange;">Hello</p>

And this external CSS:

#text { color: purple !important; }

What color will the text be?
CSS
<p id="text" style="color: orange;">Hello</p>
ABlack, because the browser ignores conflicting styles.
BPurple, because <code>!important</code> overrides inline styles.
COrange, because inline styles always win.
DOrange, because <code>!important</code> only works in internal styles.
Attempts:
2 left
💡 Hint
Remember what !important does in CSS.
❓ rendering
advanced
2:00remaining
What color will the text appear?
Look at this HTML snippet:

<div style="color: green;"><p class="text">Sample Text</p></div>

And this CSS:

.text { color: blue !important; }

What color will the <p> text be?
CSS
<div style="color: green;"><p class="text">Sample Text</p></div>
ABlue, because the class with <code>!important</code> overrides inline styles on parent.
BGreen, because inline styles on the parent apply to children.
CBlack, because conflicting styles cancel out.
DGreen, because inline styles always override class selectors.
Attempts:
2 left
💡 Hint
Think about how !important affects inheritance and specificity.
❓ selector
advanced
2:00remaining
Which CSS rule applies to the button's background?
Given this HTML:

<button id="btn" style="background-color: yellow;">Click</button>

And these CSS rules:

#btn { background-color: red !important; }
button { background-color: blue; }

What background color will the button have?
CSS
<button id="btn" style="background-color: yellow;">Click</button>
ARed, because the ID selector with !important overrides inline styles.
BYellow, because inline styles override all except !important.
CBlue, because the element selector is the most general.
DYellow, because !important does not work on ID selectors.
Attempts:
2 left
💡 Hint
Check which rule has the highest specificity and if !important is used.
❓ accessibility
expert
2:00remaining
How does inline style affect accessibility and user preferences?
If a website uses inline styles to set text color and background color directly on elements, what is a potential accessibility problem?

Choose the best answer.
AInline styles have no effect on accessibility because screen readers ignore colors.
BInline styles improve accessibility by forcing consistent colors across all devices.
CInline styles can override user browser settings, making it hard for users with visual impairments to adjust colors.
DInline styles automatically adjust to user preferences for color contrast.
Attempts:
2 left
💡 Hint
Think about how users customize their browsers for better visibility.