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.

Practice

1. In Angular, where do you place inline styles for a component?

easy

A. Inside the styleUrls array in the component decorator

B. In the global styles.css file

C. Inside the styles array in the component decorator

D. Inside the template property of the component

Solution

1. Step 1: Understand Angular component decorator properties

   The styles property is used to define inline CSS styles directly inside the component decorator.

2. Step 2: Differentiate between styles and styleUrls

   styleUrls is used for external CSS files, not inline styles.

3. Final Answer:

   Inside the styles array in the component decorator -> Option C

4. Quick Check:

   Inline styles = styles property [OK]

Hint: Inline styles go in styles, external in styleUrls [OK]

Common Mistakes:

• Confusing styles with styleUrls
• Placing inline styles in global styles.css
• Trying to put styles inside template

2. Which of the following is the correct syntax to add external styles in an Angular component?

easy

A. @Component({ styleUrl: ['app.component.css'] })

B. @Component({ styleUrls: ['app.component.css'] })

C. @Component({ styles: ['app.component.css'] })

D. @Component({ styleSheets: ['app.component.css'] })

Solution

1. Step 1: Recall the correct property name for external styles

   The correct property is styleUrls (plural, camelCase) to link external CSS files.

2. Step 2: Check syntax correctness

   The value must be an array of strings with file paths, e.g., ['app.component.css'].

3. Final Answer:

   @Component({ styleUrls: ['app.component.css'] }) -> Option B

4. Quick Check:

   External styles use styleUrls array [OK]

Hint: Use styleUrls with array of CSS files for external styles [OK]

Common Mistakes:

• Using singular styleUrl instead of styleUrls
• Putting file names inside styles instead of styleUrls
• Using wrong property names like styleSheets

3. What will happen if you define both styles and styleUrls in an Angular component decorator?

medium

A. Angular will throw a compilation error

B. Only inline styles will be applied, external styles ignored

C. Only external styles will be applied, inline styles ignored

D. Both inline and external styles will be applied and combined

Solution

1. Step 1: Understand Angular style merging behavior

   Angular merges styles from both styles (inline) and styleUrls (external) when both are present.

2. Step 2: Confirm no errors occur

   Angular does not throw errors for using both; it applies all styles combined.

3. Final Answer:

   Both inline and external styles will be applied and combined -> Option D

4. Quick Check:

   Inline + external styles combine in Angular [OK]

Hint: Both inline and external styles combine if both are present [OK]

Common Mistakes:

• Thinking one style type overrides the other
• Expecting a compilation error when both are used
• Assuming only external styles apply if both exist

4. Identify the error in this Angular component decorator:

@Component({
  selector: 'app-test',
  styles: 'h1 { color: red; }',
  styleUrls: ['test.component.css']
})

medium

A. styles should be an array of strings, not a single string

B. styleUrls should be a string, not an array

C. The selector name is invalid

D. The component decorator is missing the template property

Solution

1. Step 1: Check the type of styles property

   styles must be an array of strings, but here it is a single string.

2. Step 2: Verify other properties

   styleUrls is correctly an array; selector is valid; template is optional.

3. Final Answer:

   styles should be an array of strings, not a single string -> Option A

4. Quick Check:

   styles = array of strings [OK]

Hint: Always use array for styles, even if one style [OK]

Common Mistakes:

• Using string instead of array for styles
• Confusing styleUrls type
• Thinking template is mandatory

5. You want to quickly test a style change only for one Angular component without affecting others. Which approach is best and why?

hard

A. Use inline styles in the styles array for quick, component-specific changes

B. Add the style to the global styles.css file for easy access

C. Create a new external CSS file and add it to styleUrls for every quick change

D. Use inline styles inside the component's HTML template tags

Solution

1. Step 1: Consider scope and speed of style changes

   Inline styles in styles apply only to that component and are quick to edit without creating files.

2. Step 2: Evaluate other options

   Global styles affect all components; creating new CSS files is slower; inline HTML styles are not recommended for maintainability.

3. Final Answer:

   Use inline styles in the styles array for quick, component-specific changes -> Option A

4. Quick Check:

   Quick, local style changes = inline styles [OK]

Hint: Inline styles are fastest for single component quick tests [OK]

Common Mistakes:

• Adding quick changes to global styles affecting all components
• Creating new files for every small style change
• Using inline HTML styles instead of Angular styles