In Angular, component styles allow you to define the look and feel of your components. This module will cover how to apply styles to your components, the different ways to include styles, and how Angular handles component encapsulation.

1. Inline Styles
2. External Stylesheets
3. Component Style Encapsulation
4. View Encapsulation Modes
5. Global Styles

Inline styles are defined directly within the component's decorator. This is useful for small amounts of styling.

• The styles property in the @Component decorator is an array of strings, each containing CSS rules.
• These styles are scoped to the component, meaning they won't affect other components.

External stylesheets are more maintainable for larger applications. You can link an external stylesheet in the component's decorator.

• The styleUrls property in the @Component decorator is an array of paths to CSS files.
• These styles are also scoped to the component.

Angular uses encapsulation to ensure that styles defined in a component do not leak out and affect other components. This is achieved using the Shadow DOM or emulated encapsulation.

Angular provides three encapsulation modes:

1. Emulated (default): Emulates Shadow DOM by adding unique attributes to styles and elements.
2. Shadow DOM: Uses the browser's native Shadow DOM API.
3. None: No encapsulation, styles are global.

• ViewEncapsulation.Emulated: Adds unique attributes to styles and elements to emulate Shadow DOM.
• ViewEncapsulation.ShadowDom: Uses the browser's native Shadow DOM.
• ViewEncapsulation.None: No encapsulation, styles are global.

Global styles are defined in the styles.css file (or styles.scss if using SASS) and affect the entire application.

• Global styles are not scoped to any component and will apply to all elements in the application.

1. Create a new component named StyledComponent.
2. Apply inline styles to change the text color to blue and font size to 20px.
3. Create an external stylesheet to change the background color to lightgray.
4. Experiment with different encapsulation modes and observe the changes.

styled.component.ts

styled.component.css

• Overusing Inline Styles: Inline styles are useful for quick styling but can become unmanageable in larger applications.
• Forgetting Encapsulation: Be mindful of encapsulation modes, especially when using ViewEncapsulation.None, as it can lead to style conflicts.
• Global Styles Conflicts: Ensure global styles do not unintentionally override component-specific styles.

In this section, you learned how to style Angular components using inline styles, external stylesheets, and different encapsulation modes. Understanding these concepts is crucial for creating maintainable and scalable Angular applications. Next, we will explore how components interact with each other in the "Component Interaction" module.