# Styling the host element in Angular

Styling the host element in Angular can be done using the `:host` selector in the component's styles.

This example demonstrates how to encapsulate styles within a component and apply them directly to the host element using the `:host` pseudo-class.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <p>Content inside my component</p>
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        border: 2px solid black;
        padding: 10px;
        background-color: lightblue;
      }

      :host:hover {
        background-color: lightcoral;
      }
    `
  ]
})
export class MyComponent {}
```

### Explanation

* `:host`: The `:host` selector is used to apply styles to the host element itself, which is `<app-my-component>` in this case.
    
* `display: block`: custom elements are not display block by default.
    

### Example

[Stackblitz example](https://stackblitz.com/edit/stackblitz-starters-3mck4z?file=src%2Fmain.ts)