If an Angular component has both styles and styleUrls with conflicting CSS rules, which styles take precedence?

medium📝 component behavior Q5 of 15

Angular - Components

If an Angular component has both styles and styleUrls with conflicting CSS rules, which styles take precedence?

AAngular merges both styles and applies the one with higher specificity

BExternal styles from <code>styleUrls</code> override inline styles in <code>styles</code>

CThe last declared style block in the decorator overrides the other

DInline styles defined in <code>styles</code> override external styles from <code>styleUrls</code>

Step-by-Step Solution

Solution:

Step 1: Understand Angular style precedence
Inline styles declared in the styles array have higher priority than external styles in styleUrls.
Step 2: Analyze conflicting rules
When conflicts occur, Angular applies inline styles over external ones.
Final Answer:
Inline styles defined in styles override external styles -> Option D
Quick Check:
Inline styles have higher precedence [OK]

Quick Trick: Inline styles override external styles in Angular [OK]

Common Mistakes:

Master "Components" in Angular

9 interactive learning modes - each teaches the same concept differently

Want More Practice?

15+ quiz questions · All difficulty levels · Free

More Angular Quizzes