Inline vs external styles in Angular - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular apply inline styles compared to external styles?

Consider an Angular component with both inline styles defined in the @Component decorator and external styles linked via styleUrls. What is the behavior of Angular when rendering these styles?

Angular

@Component({
  selector: 'app-sample',
  template: `<p class='text'>Hello</p>`,
  styles: [`.text { color: red; }`],
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {}

A Angular applies only external styles and discards inline styles defined in the component decorator.

B Angular ignores inline styles if external styles are present in styleUrls.

C Angular applies only inline styles and ignores external styles in styleUrls.

D Angular merges inline styles and external styles, applying both with inline styles taking precedence if conflicts exist.

💡 Hint

Think about how CSS specificity and Angular style encapsulation work together.

Angular combines both inline styles and external styles when rendering a component. Inline styles defined in the styles array are added as style tags scoped to the component, and external styles from styleUrls are also included. If there is a conflict, inline styles generally have higher precedence due to their order and specificity.

📝 Syntax

intermediate

Identify the correct way to add inline styles in Angular component

Which of the following Angular component decorators correctly applies inline styles?

A @Component({ selector: 'app-test', template: `<div>Test</div>`, styles: ['div { color: blue; }'] })

B @Component({ selector: 'app-test', template: `<div>Test</div>`, styleUrls: ['div { color: blue; }'] })

C @Component({ selector: 'app-test', template: `<div>Test</div>`, styles: 'div { color: blue; }' })

D @Component({ selector: 'app-test', template: `<div>Test</div>`, style: ['div { color: blue; }'] })

💡 Hint

Remember the property name for inline styles is plural and expects an array.

The styles property in the @Component decorator expects an array of strings, each string containing CSS rules. The styleUrls property expects an array of file paths. Using style or a string instead of an array causes errors.

🔧 Debug

advanced

Why does external style not apply in this Angular component?

Given this Angular component, the external CSS file app.component.css contains p { font-weight: bold; } but the paragraph text is not bold. What is the likely cause?

Angular

@Component({
  selector: 'app-root',
  template: `<p>Important text</p>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

A The external style file path is incorrect or the file does not exist at the specified location.

B The external style file has a wrong extension (.scss) but Angular expects .css and does not process it.

C Angular disables external styles by default and requires inline styles only.

D The paragraph tag is missing a class, so styles do not apply.

💡 Hint

Check the file path and file existence carefully.

If the path in styleUrls is incorrect or the file is missing, Angular silently fails to load the styles, so no styles apply. Angular supports .scss files if configured properly, so the extension alone is not the issue.

❓ state_output

advanced

What is the color of the text rendered by this Angular component?

Consider this Angular component with conflicting inline and external styles. What color will the paragraph text be?

Angular

@Component({
  selector: 'app-color',
  template: `<p class='text'>Color Test</p>`,
  styles: [`.text { color: green !important; }`],
  styleUrls: ['./color.component.css']
})
export class ColorComponent {}

A Red, because inline styles are ignored and external styles set color to red.

B Green, because inline styles with !important override external styles.

C Black, because Angular does not apply styles with !important.

D Blue, because the external CSS file sets .text { color: blue; } and !important is ignored.

💡 Hint

Recall how CSS !important affects style precedence.

The inline styles defined in the styles array are applied with higher specificity and the !important rule forces the color green to override any external style color like blue or red.

🧠 Conceptual

expert

Why prefer external styles over inline styles in Angular for large projects?

In large Angular projects, why is it generally better to use external stylesheets (styleUrls) instead of inline styles (styles)?

A Angular does not support inline styles in production builds, so external stylesheets are mandatory.

B Inline styles are faster to load, so external stylesheets are avoided for performance reasons.

C External stylesheets improve maintainability and caching, while inline styles increase component size and reduce reuse.

D External stylesheets disable Angular's style encapsulation, which is preferred in large projects.

💡 Hint

Think about how code organization and browser caching affect large apps.

External stylesheets allow better separation of concerns, easier updates, and browser caching benefits. Inline styles increase the component bundle size and make reuse harder. Angular supports both, but external styles are preferred for scalability.