docs: Component Styles guide for CLI (#19791)

aio/content/examples/component-styles/src/app/hero-app.component.1.css

@@ -0,0 +1,3 @@
+h1 {
+  font-weight: normal;
+}

aio/content/examples/component-styles/src/app/hero-app.component.1.ts

@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
+  styleUrls: ['./hero-app.component.css']
+})
+export class HeroAppComponent {
+// #enddocregion
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  );
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+// #docregion
+}
+// #enddocregion

aio/content/examples/component-styles/src/app/hero-app.component.ts

@@ -6,7 +6,8 @@ import { Hero } from './hero';
   selector: 'app-root',
   template: `
     <h1>Tour of Heroes</h1>
-    <app-hero-main [hero]=hero></app-hero-main>`,
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
   styles: ['h1 { font-weight: normal; }']
 })
 export class HeroAppComponent {