Bird
Raised Fist0
CSSmarkup~5 mins

Inline vs external precedence in CSS - Quick Revision & Key Differences

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
Recall & Review
beginner
What is inline CSS?
Inline CSS is CSS code written directly inside an HTML element using the style attribute. It applies styles only to that specific element.
Click to reveal answer
beginner
What is external CSS?
External CSS is CSS code written in a separate file with a .css extension. This file is linked to the HTML document using the <link> tag inside the <head> section.
Click to reveal answer
beginner
Which has higher precedence: inline CSS or external CSS?
Inline CSS has higher precedence than external CSS. This means if both define a style for the same element and property, the inline style will be applied.
Click to reveal answer
intermediate
Why does inline CSS have higher precedence than external CSS?
Inline CSS is considered more specific because it targets a single element directly. Browsers apply the most specific style rule, so inline styles override external styles.
Click to reveal answer
intermediate
How can you override inline CSS if needed?
You can override inline CSS by using !important in external or internal CSS, or by using JavaScript to change styles dynamically.
Click to reveal answer
Which CSS style will apply if both inline and external CSS set the same property on an element?
AInline CSS
BExternal CSS
CBoth apply equally
DNeither applies
Where is external CSS usually linked in an HTML document?
AInside the <footer> tag
BInside the <body> tag
CInside the <head> tag
DInside the <nav> tag
What attribute is used to add inline CSS to an HTML element?
Aclass
Bstyle
Cid
Dcss
Which method can override inline CSS styles?
AUsing external CSS without !important
BUsing inline JavaScript alerts
CUsing only HTML attributes
DUsing !important in external CSS
Why is inline CSS generally discouraged for large projects?
AIt makes code harder to maintain and reuse
BIt is slower to load
CIt does not work in modern browsers
DIt cannot style text
Explain the difference between inline and external CSS and which one takes precedence.
Think about where the CSS code is written and how browsers decide which style to apply.
You got /3 concepts.
    Describe how you can override an inline CSS style using external CSS.
    Consider CSS specificity and special keywords.
    You got /3 concepts.

      Practice

      (1/5)
      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