Inline vs external styles in Angular - Quick Revision & Key Differences

Recall & Review

beginner

What are inline styles in Angular components?

Inline styles are CSS rules written directly inside the component's decorator using the styles array. They apply styles only to that component.

beginner

How do external styles work in Angular components?

External styles are CSS files linked to a component using the styleUrls property in the component decorator. They keep styles separate from code and can be reused.

intermediate

Name one advantage of using inline styles in Angular.

Inline styles keep the styles close to the component code, making it easier to see and change styles quickly for small or unique style rules.

intermediate

What is a benefit of using external styles over inline styles in Angular?

External styles help keep the component code clean and allow sharing styles across multiple components, improving maintainability.

advanced

Can Angular components use both inline and external styles together?

Yes, Angular components can use both styles and styleUrls together. Inline styles override external styles if there is a conflict.

Where are inline styles defined in an Angular component?

A In a separate CSS file linked with <code>styleUrls</code>

B Inside the component's TypeScript class

C In the global styles.css file

D Inside the <code>styles</code> array in the component decorator

Inline styles are defined inside the styles array directly in the component decorator.

What is the main purpose of using external styles in Angular?

A To write styles inside the component's TypeScript code

B To keep styles separate and reusable across components

C To override inline styles automatically

D To disable component styling

External styles keep CSS separate from code and allow reuse across multiple components.

If a style is defined both inline and externally, which one takes precedence?

A External styles

B Neither, styles conflict and are ignored

C Inline styles

D The first one loaded by the browser

Inline styles override external styles if there is a conflict.

Which Angular decorator property is used to link external CSS files?

A styleUrls

B cssFiles

C styles

D externalStyles

The styleUrls property links external CSS files to the component.

Why might you choose inline styles for a component?

A To keep styles close and simple for small changes

B To share styles across many components

C To improve global site styling

D To disable CSS encapsulation

Inline styles are good for quick, small style changes close to the component code.

Explain the difference between inline and external styles in Angular components.

Think about where the CSS code lives and how it affects the component.

Describe a scenario where you would prefer inline styles over external styles in Angular.

Consider ease of access and simplicity for small style rules.