Bird
0
0

Given this Angular component snippet, what will be the background color of the div when rendered?

medium📝 component behavior Q4 of 15
Angular - Components
Given this Angular component snippet, what will be the background color of the div when rendered?

@Component({
  selector: 'app-box',
  styles: [`div { background-color: red; }`],
  styleUrls: ['./box.component.css']
})
export class BoxComponent {}

Assuming box.component.css contains div { background-color: blue; }
ARed background
BBlue background
CNo background color applied
DBoth red and blue backgrounds alternating
Step-by-Step Solution
Solution:
  1. Step 1: Understand style precedence in Angular

    When both styles and styleUrls are defined, Angular applies inline styles last, overriding external styles if selectors match.
  2. Step 2: Check CSS rules

    Both styles target div, so the inline CSS background-color: red; overrides the external blue.
  3. Final Answer:

    Red background -> Option A
  4. Quick Check:

    Inline styles override external styles = B [OK]
Quick Trick: Inline styles override external styles if selectors match [OK]
Common Mistakes:
  • Assuming inline styles always have lower priority
  • Thinking both styles combine visually
  • Ignoring CSS specificity rules

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes