> Markdown version of [Styling Templates](https://vaadin.com/docs/v14/flow/templates/styling-templates). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Styling Templates

Since client-side templates are Web Components, their content is inside shadow DOM. By design, shadow DOM defines a local style scope that is isolated from global styles. See [Style Scopes](https://vaadin.com/docs/v14/flow/styling/style-scopes.md) for more information.

You can add component-specific scoped styles directly in the static `styles` template property.

`my-view.ts`

```js
import {LitElement, html, css} from 'lit-element';

class MyView extends LitElement {

  static get styles() {
    return css`
        :host {
          /* Styles for the <my-view> host element */
          display: block;
        }

        .my-view-title {
          font-weight: bold;
          border-bottom: 1px solid gray;
        }
    `;
  }

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);
```

`DE5CC867-194A-46E4-8682-A50519B007DC`