Adding styling

[Lilish-Warrior]

Hi,

I'm learning to create components and as I followed this tutorial I'm having issues implementing any styles into the component.
Can you help me know what I'm missing?

my-component.css

:host {
  display: block;
};


.color {
  background-color: red;
}

my-component.tsx

import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
 
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    return <div class='color'>
      Hello, World! I'm {this.getText()} 
      </div>;
  }
}

Is this where I should be adding the color class? Or should it be in my-component.stories.ts as part of the args?

Thank you