diff --git a/public/docs/_examples/toh-6/ts/sample.css b/public/docs/_examples/toh-6/ts/app/hero-search.component.css
similarity index 70%
rename from public/docs/_examples/toh-6/ts/sample.css
rename to public/docs/_examples/toh-6/ts/app/hero-search.component.css
index a5ac5b4d70..741b379356 100644
--- a/public/docs/_examples/toh-6/ts/sample.css
+++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.css
@@ -1,11 +1,4 @@
 /* #docregion */
-.error {color:red;}
-button.delete-button{
-  float:right;
-  background-color: gray !important;
-  color:white;
-}
-
 .search-result{
   border-bottom: 1px solid gray;
   border-left: 1px solid gray;
@@ -21,4 +14,3 @@ button.delete-button{
   width: 200px;
   height: 20px;
 }
-
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
index d9a04fce3f..25ada285ac 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
@@ -11,6 +11,7 @@ import { Hero } from './hero';
 @Component({
   selector: 'hero-search',
   templateUrl: 'app/hero-search.component.html',
+  styleUrls:  ['app/hero-search.component.css'],
   providers: [HeroSearchService]
 })
 export class HeroSearchComponent implements OnInit {
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.css b/public/docs/_examples/toh-6/ts/app/heroes.component.css
index 35e45af98d..75969e0b3a 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.css
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.css
@@ -1,3 +1,4 @@
+/* #docregion */
 .selected {
   background-color: #CFD8DC !important;
   color: white;
@@ -57,3 +58,10 @@ button {
 button:hover {
   background-color: #cfd8dc;
 }
+/* #docregion additions */
+.error {color:red;}
+button.delete-button{
+  float:right;
+  background-color: gray !important;
+  color:white;
+}
diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
index b84f744a78..8bbbc6123d 100644
--- a/public/docs/_examples/toh-6/ts/index.html
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index 4730b7e61f..c93ec199ca 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -319,7 +319,9 @@ block add-new-hero-via-detail-comp
   The user can *delete* an existing hero by clicking a delete button next to the hero's name.
   Add the following to the heroes component HTML right after the hero name in the repeated `<li>` tag:
 +makeExcerpt('app/heroes.component.html', 'delete')
-
+:marked
+  Add the following to the bottom of the `HeroesComponent` CSS file:
++makeExcerpt('app/heroes.component.css', 'additions')
 :marked
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
   Let's start with *add*.
@@ -415,7 +417,9 @@ block observables-section-intro
   The component template is simple &mdash; just a text box and a list of matching search results.
 
 +makeExample('app/hero-search.component.html')
-
+:marked
+  We'll also want to add styles for the new component.
++makeExample('app/hero-search.component.css')
 :marked
   As the user types in the search box, a *keyup* event binding calls the component's `search` method with the new search box value.
 
@@ -559,6 +563,7 @@ block filetree
         .file hero-detail.component.html
         .file hero-detail.component.ts
         .file hero-search.component.html (new)
+        .file hero-search.component.css (new)
         .file hero-search.component.ts (new)
         .file hero-search.service.ts (new)
         .file rxjs-operators.ts
@@ -572,7 +577,6 @@ block filetree
       .file typings ...
       .file index.html
       .file package.json
-      .file sample.css (new)
       .file styles.css
       .file systemjs.config.json
       .file tsconfig.json
@@ -597,30 +601,32 @@ block file-summary
     `toh-6/ts/app/app.component.ts,
      toh-6/ts/app/heroes.component.ts,
      toh-6/ts/app/heroes.component.html,
+     toh-6/ts/app/heroes.component.css,
      toh-6/ts/app/hero-detail.component.ts,
      toh-6/ts/app/hero-detail.component.html,
      toh-6/ts/app/hero.service.ts,
-     toh-6/ts/app/in-memory-data.service.ts,
-     toh-6/ts/sample.css`,
+     toh-6/ts/app/in-memory-data.service.ts`,
     null,
     `app.comp...ts,
      heroes.comp...ts,
      heroes.comp...html,
+     heroes.comp...css,
      hero-detail.comp...ts,
      hero-detail.comp...html,
      hero.service.ts,
-     in-memory-data.service.ts,
-     sample.css`
+     in-memory-data.service.ts`
   )
 
   +makeTabs(
     `toh-6/ts/app/hero-search.service.ts,
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
+    toh-6/ts/app/hero-search.component.css,
     toh-6/ts/app/rxjs-operators.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
     hero-search.service.html,
+    hero-search.component.css,
     rxjs-operators.ts`
   )