diff --git a/modules/angular2/src/core/annotations/template_config.js b/modules/angular2/src/core/annotations/template_config.js
index edd6e958783c..d78cff5ac63d 100644
--- a/modules/angular2/src/core/annotations/template_config.js
+++ b/modules/angular2/src/core/annotations/template_config.js
@@ -3,6 +3,7 @@ import {List} from 'angular2/src/facade/collection';
 
 export class TemplateConfig {
   url:any; //string;
+  cssUrl:any; //string
   inline:any; //string;
   directives:any; //List<Type>;
   formatters:any; //List<Type>;
@@ -10,12 +11,14 @@ export class TemplateConfig {
   @CONST()
   constructor({
       url,
+      cssUrl,
       inline,
       directives,
       formatters,
       source
     }: {
       url: string,
+      cssUrl: string,
       inline: string,
       directives: List<Type>,
       formatters: List<Type>,
@@ -23,6 +26,7 @@ export class TemplateConfig {
     })
   {
     this.url = url;
+    this.cssUrl = cssUrl;
     this.inline = inline;
     this.directives = directives;
     this.formatters = formatters;
diff --git a/modules/angular2/src/core/compiler/template_loader.js b/modules/angular2/src/core/compiler/template_loader.js
index ce7538a1f7a7..9c1430a16f05 100644
--- a/modules/angular2/src/core/compiler/template_loader.js
+++ b/modules/angular2/src/core/compiler/template_loader.js
@@ -31,21 +31,47 @@ export class TemplateLoader {
       return PromiseWrapper.resolve(template);
     }
 
+    if (isPresent(tplConfig.url) && isPresent(tplConfig.cssUrl)) {
+      return Promise.all([
+        this.buildUrl(tplConfig.url),
+        this.buildUrl(tplConfig.cssUrl)
+      ])
+      .then((props) => {
+        // if I had .spread this would be one line
+        var html = props[0];
+        var style = props[1];
+        return this.createTemplateWithCss(html, style);
+      });
+    }
+
     if (isPresent(tplConfig.url)) {
-      var url = tplConfig.url;
-      var promise = StringMapWrapper.get(this._cache, url);
-
-      if (isBlank(promise)) {
-        promise = this._xhr.get(url).then(function (html) {
-          var template = DOM.createTemplate(html);
-          return template;
-        });
-        StringMapWrapper.set(this._cache, url, promise);
-      }
-
-      return promise;
+      return this.buildUrl(tplConfig.url).then(DOM.createTemplate);
+    }
+
+    if (isPresent(tplConfig.cssUrl)) {
+      return this.buildUrl(tplConfig.cssUrl).then(DOM.createStyleElement);
     }
 
     throw new BaseException(`No template configured for component ${stringify(cmpMetadata.type)}`);
   }
+  buildUrl(url):Promise {
+    var promise = StringMapWrapper.get(this._cache, url);
+
+    if (isBlank(promise)) {
+      promise = this._xhr.get(url)
+      StringMapWrapper.set(this._cache, url, promise);
+    }
+
+    return promise;
+  }
+  createTemplateWithCss(html, css) {
+    var style = DOM.createStyleElement(css);
+
+    var d = DOM.createElement('div');
+    DOM.setInnerHTML(d, html);
+    DOM.insertBefore(d.firstChild, style);
+
+    return DOM.createTemplate(d.innerHTML);
+  }
+
 }
diff --git a/modules/angular2/src/facade/dom.es6 b/modules/angular2/src/facade/dom.es6
index bd14f254f462..fd565d05241a 100644
--- a/modules/angular2/src/facade/dom.es6
+++ b/modules/angular2/src/facade/dom.es6
@@ -112,7 +112,12 @@ export class DOM {
   }
   static createStyleElement(css:string, doc=document):StyleElement {
     var style = doc.createElement('STYLE');
-    style.innerText = css;
+    style.type = 'text/css';
+    if (style.styleSheet){
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(doc.createTextNode(css));
+    }
     return style;
   }
   static clone(node:Node) {