Inline vs external precedence in CSS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

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>

A Blue, because external stylesheets load first.

B Green, because internal styles override external styles.

C Black, because browser default styles override all.

D Red, because inline styles have the highest precedence.

💡 Hint

Think about where the style is written and how CSS decides which rule to use.

Inline styles have the highest precedence over internal and external stylesheets. So the text color will be red.

📝 Syntax

intermediate

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>

A Black, because the browser ignores conflicting styles.

B Purple, because <code>!important</code> overrides inline styles.

C Orange, because inline styles always win.

D Orange, because <code>!important</code> only works in internal styles.

💡 Hint

Remember what !important does in CSS.

The !important rule overrides inline styles, so the text color will be purple.

❓ rendering

advanced

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>

A Blue, because the class with <code>!important</code> overrides inline styles on parent.

B Green, because inline styles on the parent apply to children.

C Black, because conflicting styles cancel out.

D Green, because inline styles always override class selectors.

💡 Hint

Think about how !important affects inheritance and specificity.

The class selector with !important on the <p> overrides the inherited inline style from the parent div, so the text is blue.

❓ selector

advanced

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>

A Red, because the ID selector with !important overrides inline styles.

B Yellow, because inline styles override all except !important.

C Blue, because the element selector is the most general.

D Yellow, because !important does not work on ID selectors.

💡 Hint

Check which rule has the highest specificity and if !important is used.

The ID selector with !important overrides the inline style, so the button background is red.

❓ accessibility

expert

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.

A Inline styles have no effect on accessibility because screen readers ignore colors.

B Inline styles improve accessibility by forcing consistent colors across all devices.

C Inline styles can override user browser settings, making it hard for users with visual impairments to adjust colors.

D Inline styles automatically adjust to user preferences for color contrast.

💡 Hint

Think about how users customize their browsers for better visibility.

Inline styles hard-code colors, which can prevent users from applying their own color schemes or high contrast modes, reducing accessibility.

Practice

1. Which CSS style has the highest priority when applied to the same HTML element and property?
style="color: red;" vs external stylesheet setting color: blue;

easy

A. Both have equal priority

B. External CSS file

C. Inline CSS inside the style attribute

D. Depends on the order of CSS files

Solution

1. Step 1: Understand CSS specificity rules

   Inline CSS (style attribute) has higher specificity than external CSS selectors.

2. Step 2: Compare inline and external styles on the same property

   When both define the same property, inline CSS overrides external CSS.

3. Final Answer:

   Inline CSS inside the style attribute -> Option C

4. Quick Check:

   Inline CSS > External CSS [OK]

Hint: Inline styles override external styles for same property [OK]

Common Mistakes:

• Thinking external CSS always overrides inline
• Confusing order of CSS files with inline priority
• Assuming equal priority for inline and external

2. Which of the following is the correct syntax to add inline CSS to an HTML element?

easy

A. Text

B. Text

C. Text

D. Text

Solution

1. Step 1: Recall inline CSS syntax

   Inline CSS uses the style attribute with CSS rules inside quotes.

2. Step 2: Check each option for correct attribute and format

   Only
   Text uses style="color: blue;" correctly.

3. Final Answer:

   <div style="color: blue;">Text</div> -> Option A

4. Quick Check:

   Inline CSS uses style attribute [OK]

Hint: Use style="property: value;" for inline CSS [OK]

Common Mistakes:

• Using class or css attribute instead of style
• Missing quotes around CSS rules
• Using invalid attribute names

3. Given the HTML and CSS below, what color will the text inside the <p> tag be?

<style>
p { color: green; }
</style>
<p style="color: orange;">Hello</p>

medium

A. Green

B. Orange

C. Black (default)

D. Blue

Solution

1. Step 1: Identify CSS rules applied to <p>

   External style sets color: green;, inline style sets color: orange;.

2. Step 2: Apply CSS precedence rules

   Inline style overrides external style for the same property.

3. Final Answer:

   Orange -> Option B

4. Quick Check:

   Inline color overrides external color [OK]

Hint: Inline style color beats external stylesheet color [OK]

Common Mistakes:

• Choosing external CSS color instead of inline
• Ignoring inline style precedence
• Assuming default color applies

4. You have this HTML and CSS:

<style>
.button { background-color: blue; }
</style>
<button class="button" style="background-color: red;">Click</button>

The button background is still blue. What is the likely problem?

medium

A. The inline style syntax is incorrect

B. External CSS has higher precedence than inline

C. There is a typo in the class name

D. The browser does not support inline styles

Solution

1. Step 1: Check inline style syntax

   Inline style must be inside style="..." attribute correctly.

2. Step 2: Understand CSS precedence

   Inline styles override external styles unless syntax is wrong or missing.

3. Final Answer:

   The inline style syntax is incorrect -> Option A

4. Quick Check:

   Incorrect inline syntax means external CSS applies [OK]

Hint: Check inline style attribute syntax carefully [OK]

Common Mistakes:

• Assuming external CSS overrides inline
• Ignoring syntax errors in inline style
• Thinking browser blocks inline styles

5. You want all paragraphs to be blue except one special paragraph that should be red. You have an external CSS file:

p { color: blue; }

Which is the best way to make only the special paragraph red without changing the external CSS file?

hard

A. Add a new CSS rule in the external file for the special paragraph

B. Add a class to the paragraph and define color red in external CSS

C. Use JavaScript to change the color after page load

D. Add style="color: red;" inline to the special paragraph

Solution

1. Step 1: Understand constraints

   You cannot change the external CSS file, so options A and D are invalid.

2. Step 2: Use inline CSS for specific override

   Inline CSS overrides external CSS, so adding style="color: red;" works immediately.

3. Final Answer:

   Add style="color: red;" inline to the special paragraph -> Option D

4. Quick Check:

   Inline CSS overrides external without file changes [OK]

Hint: Use inline style for quick, single-element overrides [OK]

Common Mistakes:

• Trying to edit external CSS when not allowed
• Using JavaScript unnecessarily
• Adding classes without CSS rules