diff --git a/apps/action-bar-demo/main-page.xml b/apps/action-bar-demo/main-page.xml
index 482152218..a5ce77251 100644
--- a/apps/action-bar-demo/main-page.xml
+++ b/apps/action-bar-demo/main-page.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page>
   <Page.actionBar>
-    <ActionBar title="Title" cssClass="custom-action-bar">
+    <ActionBar title="Title" class="custom-action-bar">
       <ActionBar.actionItems>
         <ActionItem text="hi" />
       </ActionBar.actionItems>
diff --git a/apps/cuteness.io/details-page.xml b/apps/cuteness.io/details-page.xml
index 0c3843dbe..612faa1fe 100644
--- a/apps/cuteness.io/details-page.xml
+++ b/apps/cuteness.io/details-page.xml
@@ -3,7 +3,7 @@
     <ScrollView>
       <StackLayout>
         <Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
-        <Label text="{{ title }}" cssClass="detailsTitle" textWrap="true" />
+        <Label text="{{ title }}" class="detailsTitle" textWrap="true" />
       </StackLayout>
     </ScrollView>
     <StackLayout orientation="horizontal" row="1">
diff --git a/apps/cuteness.io/main-page.xml b/apps/cuteness.io/main-page.xml
index e062e9486..04667fbbb 100644
--- a/apps/cuteness.io/main-page.xml
+++ b/apps/cuteness.io/main-page.xml
@@ -7,10 +7,10 @@
             <ListView.itemTemplate>
               <!-- Binding in template property of an component will use the bindingContext provided by the component. -->
               <GridLayout columns="auto, *, auto" rows="auto, 25">
-                <Image src="{{ thumbnailImage }}" cssClass="thumbnail" rowSpan="2"/>
-                <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" col="1" colSpan="2" minHeight="50" />
-                <Label text="{{ author ? 'by ' + author : '' }}" cssClass="author" col="1" row="1" />
-                <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" cssClass="comments" col="2" row="1" />
+                <Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
+                <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
+                <Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
+                <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
               </GridLayout>
               <!-- End of tempplate. -->
             </ListView.itemTemplate>
diff --git a/apps/cuteness.unoptimized/details-page.xml b/apps/cuteness.unoptimized/details-page.xml
index 0c3843dbe..612faa1fe 100644
--- a/apps/cuteness.unoptimized/details-page.xml
+++ b/apps/cuteness.unoptimized/details-page.xml
@@ -3,7 +3,7 @@
     <ScrollView>
       <StackLayout>
         <Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
-        <Label text="{{ title }}" cssClass="detailsTitle" textWrap="true" />
+        <Label text="{{ title }}" class="detailsTitle" textWrap="true" />
       </StackLayout>
     </ScrollView>
     <StackLayout orientation="horizontal" row="1">
diff --git a/apps/cuteness.unoptimized/main-page.xml b/apps/cuteness.unoptimized/main-page.xml
index cb0deaf94..ed2e29fd5 100644
--- a/apps/cuteness.unoptimized/main-page.xml
+++ b/apps/cuteness.unoptimized/main-page.xml
@@ -7,10 +7,10 @@
             <ListView.itemTemplate>
               <!-- Binding in template property of an component will use the bindingContext provided by the component. -->
               <GridLayout columns="auto, *, auto" rows="auto, 25">
-                <Image src="{{ thumbnailImage }}" cssClass="thumbnail" rowSpan="2"/>
-                <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" col="1" colSpan="2" minHeight="50" />
-                <Label text="{{ author ? 'by ' + author : '' }}" cssClass="author" col="1" row="1" />
-                <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" cssClass="comments" col="2" row="1" />
+                <Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
+                <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
+                <Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
+                <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
               </GridLayout>
               <!-- End of tempplate. -->
             </ListView.itemTemplate>
diff --git a/apps/gallery-app/main-page.xml b/apps/gallery-app/main-page.xml
index f4fbd21c6..5262bcabb 100644
--- a/apps/gallery-app/main-page.xml
+++ b/apps/gallery-app/main-page.xml
@@ -2,7 +2,7 @@
 <Page>
   <ScrollView>
     <StackLayout>
-      <Label cssClass="title" text="Layouts" />
+      <Label class="title" text="Layouts" />
       <StackLayout>
         <Button tag="layouts/stack-layout" text="StackLayout" tap="itemTap" />
         <Button tag="layouts/grid-layout" text="GridLayout" tap="itemTap" />
@@ -11,7 +11,7 @@
         <Button tag="layouts/absolute-layout" text="AbsoluteLayout" tap="itemTap" />
       </StackLayout>
 
-      <Label cssClass="title" text="Content" />
+      <Label class="title" text="Content" />
       <StackLayout>
         <Button tag="content/tab-view" text="TabView" tap="itemTap" />
         <Button tag="content/web-view" text="WebView" tap="itemTap" />
@@ -20,7 +20,7 @@
         <Button tag="content/border" text="Border" tap="itemTap" />
       </StackLayout>
 
-      <Label cssClass="title" text="Views" />
+      <Label class="title" text="Views" />
       <StackLayout>
         <Button tag="views/button" text="Button" tap="itemTap" />
         <Button tag="views/label" text="Label" tap="itemTap" />
diff --git a/apps/paylocity/login.xml b/apps/paylocity/login.xml
index 70be9ac5a..11e609a12 100644
--- a/apps/paylocity/login.xml
+++ b/apps/paylocity/login.xml
@@ -2,10 +2,10 @@
   <StackLayout>
     <StackLayout verticalAlignment="center" horizontalAlignment="center" margin="50">
       <Image loaded="imageLoaded" />
-      <TextField cssClass="nameField" text="Captain" margin="10" />
-      <TextField cssClass="familyNameField" text="America" margin="10" />
-      <TextField cssClass="passwordField" secure="true" hint="Password (leave empty)" margin="10" />
-      <Button cssClass="loginButton" text="Login" margin="10" tap="loginButtonTap" />
+      <TextField class="nameField" text="Captain" margin="10" />
+      <TextField class="familyNameField" text="America" margin="10" />
+      <TextField class="passwordField" secure="true" hint="Password (leave empty)" margin="10" />
+      <Button class="loginButton" text="Login" margin="10" tap="loginButtonTap" />
     </StackLayout>
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/template-hello-world/main-page.xml b/apps/template-hello-world/main-page.xml
index e7c9a903d..c1d432ede 100644
--- a/apps/template-hello-world/main-page.xml
+++ b/apps/template-hello-world/main-page.xml
@@ -1,7 +1,7 @@
 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
   <StackLayout>
-    <Label text="Tap the button" cssClass="title"/>
+    <Label text="Tap the button" class="title"/>
     <Button text="TAP" tap="{{ tapAction }}" />
-    <Label text="{{ message }}" cssClass="message" textWrap="true"/>
+    <Label text="{{ message }}" class="message" textWrap="true"/>
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/template-master-detail/details-view.xml b/apps/template-master-detail/details-view.xml
index b6a4c11b9..14bd0c938 100644
--- a/apps/template-master-detail/details-view.xml
+++ b/apps/template-master-detail/details-view.xml
@@ -1,4 +1,4 @@
 <StackLayout  xmlns="http://www.nativescript.org/tns.xsd">
-  <Label text="{{ title }}" cssClass="detail-title"/>
-  <Label text="{{ info }}" cssClass="info" textWrap="true"/>
+  <Label text="{{ title }}" class="detail-title"/>
+  <Label text="{{ info }}" class="info" textWrap="true"/>
 </StackLayout>
diff --git a/apps/template-master-detail/main-page.minWH600.xml b/apps/template-master-detail/main-page.minWH600.xml
index 1627c9d66..529c3e6f9 100644
--- a/apps/template-master-detail/main-page.minWH600.xml
+++ b/apps/template-master-detail/main-page.minWH600.xml
@@ -2,11 +2,11 @@
       xmlns:app="."
       loaded="pageLoaded">
   <GridLayout rows="auto, *" columns="300, *">
-    <Label text="Master Details Page" cssClass="title" colSpan="2" />
+    <Label text="Master Details Page" class="title" colSpan="2" />
 
     <ListView items="{{ items }}" itemTap="listViewItemTap" row="1">
       <ListView.itemTemplate>
-        <Label text="{{ title }}" cssClass="listItem" />
+        <Label text="{{ title }}" class="listItem" />
       </ListView.itemTemplate>
     </ListView>
 
diff --git a/apps/template-master-detail/main-page.xml b/apps/template-master-detail/main-page.xml
index b15e0d6ac..731a4133e 100644
--- a/apps/template-master-detail/main-page.xml
+++ b/apps/template-master-detail/main-page.xml
@@ -1,11 +1,11 @@
 <Page xmlns="http://www.nativescript.org/tns.xsd"
       loaded="pageLoaded">
   <GridLayout rows="auto, *">
-    <Label text="Items Page" cssClass="title" />
+    <Label text="Items Page" class="title" />
 
     <ListView items="{{ items }}" itemTap="listViewItemTap" row="1">
       <ListView.itemTemplate>
-        <Label text="{{ title }}" cssClass="listItem" />
+        <Label text="{{ title }}" class="listItem" />
       </ListView.itemTemplate>
     </ListView>
   </GridLayout>
diff --git a/apps/template-settings/main-page.xml b/apps/template-settings/main-page.xml
index 2ba1a5284..f205104e9 100644
--- a/apps/template-settings/main-page.xml
+++ b/apps/template-settings/main-page.xml
@@ -1,34 +1,34 @@
 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
-  <StackLayout cssClass="content">
+  <StackLayout class="content">
     <!-- Profile sttings -->
-    <Label cssClass="header" text="Profile"/>
-    <GridLayout cssClass="field-group" columns="auto, 50, *" rows="auto, auto, auto">
+    <Label class="header" text="Profile"/>
+    <GridLayout class="field-group" columns="auto, 50, *" rows="auto, auto, auto">
 
       <!-- Name -->
-      <Label cssClass="field" text="Name"/>
-      <Button cssClass="field-dialog-button" text="{{ name }}" tap="{{ promptName }}" col="1" colSpan="2"/>
+      <Label class="field" text="Name"/>
+      <Button class="field-dialog-button" text="{{ name }}" tap="{{ promptName }}" col="1" colSpan="2"/>
 
       <!-- Height -->
-      <Label cssClass="field" text="Height" row="1"/>
-      <TextField cssClass="field-value" text="{{ height }}" keyboardType="number" row="1" col="1"/>
-      <Label cssClass="field-unit" text="cm" col="2" row="1"/>
+      <Label class="field" text="Height" row="1"/>
+      <TextField class="field-value" text="{{ height }}" keyboardType="number" row="1" col="1"/>
+      <Label class="field-unit" text="cm" col="2" row="1"/>
 
       <!-- Weight -->
-      <Label cssClass="field" text="Weight" row="2"/>
-      <TextField cssClass="field-value" text="{{ weight }}" keyboardType="number" row="2" col="1"/>
-      <Label cssClass="field-unit" text="kg"  row="2" col="2"/>
+      <Label class="field" text="Weight" row="2"/>
+      <TextField class="field-value" text="{{ weight }}" keyboardType="number" row="2" col="1"/>
+      <Label class="field-unit" text="kg"  row="2" col="2"/>
     </GridLayout>
 
     <!-- Notifications settings -->
-    <Label cssClass="header" text="Notifications"/>
-    <GridLayout cssClass="field-group" columns="*, auto" rows="auto, auto, auto">
+    <Label class="header" text="Notifications"/>
+    <GridLayout class="field-group" columns="*, auto" rows="auto, auto, auto">
       <!-- Notifications -->
-      <Label cssClass="field" text="Vibrate"/>
-      <Switch cssClass="field-value" checked="{{ vibrateEnabled }}" col="1"/>
+      <Label class="field" text="Vibrate"/>
+      <Switch class="field-value" checked="{{ vibrateEnabled }}" col="1"/>
 
       <!-- Notifications -->
-      <Label cssClass="field" text="Sound" row="1"/>
-      <Switch cssClass="field-value"  checked="{{ soundEnabled }}" row="1" col="1"/>
+      <Label class="field" text="Sound" row="1"/>
+      <Switch class="field-value"  checked="{{ soundEnabled }}" row="1" col="1"/>
       <Slider maxValue="100" value="{{ soundVolume }}" isEnabled="{{ soundEnabled }}"  row="2" colSpan="2"/>
     </GridLayout>
   </StackLayout>
diff --git a/apps/template-tab-navigation/main-page.xml b/apps/template-tab-navigation/main-page.xml
index 08aa7e1a5..a876d691f 100644
--- a/apps/template-tab-navigation/main-page.xml
+++ b/apps/template-tab-navigation/main-page.xml
@@ -3,16 +3,16 @@
     <TabView.items>
       <TabViewItem title="First">
         <TabViewItem.view>
-          <StackLayout cssClass="tab-content">
-            <Label text="First View" cssClass="title"/>
+          <StackLayout class="tab-content">
+            <Label text="First View" class="title"/>
             <Label text="This is the content of the first tab." textWrap="true"/>
           </StackLayout>
         </TabViewItem.view>
       </TabViewItem>
       <TabViewItem title="Second">
         <TabViewItem.view>
-          <StackLayout cssClass="tab-content">
-            <Label text="Second View" cssClass="title"/>
+          <StackLayout class="tab-content">
+            <Label text="Second View" class="title"/>
             <Label text="This is the content of the second tab." textWrap="true"/>
           </StackLayout>
         </TabViewItem.view>
diff --git a/apps/tests/ui/list-view/list-view-tests.ts b/apps/tests/ui/list-view/list-view-tests.ts
index 6a744d647..1233c7c71 100644
--- a/apps/tests/ui/list-view/list-view-tests.ts
+++ b/apps/tests/ui/list-view/list-view-tests.ts
@@ -57,7 +57,7 @@ import labelModule = require("ui/label");
 // <Page>
 //  {%raw%}<ListView items="{{ myItems }}">
 //     <ListView.itemTemplate>
-//        <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" />
+//        <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
 //     </ListView.itemTemplate>
 //  </ListView>{%endraw%}
 // </Page>
diff --git a/apps/tests/ui/repeater/repeater-tests.ts b/apps/tests/ui/repeater/repeater-tests.ts
index b7de64bab..8df9880f8 100644
--- a/apps/tests/ui/repeater/repeater-tests.ts
+++ b/apps/tests/ui/repeater/repeater-tests.ts
@@ -32,7 +32,7 @@ import labelModule = require("ui/label");
 // <Page>
 //  {%raw%}<Repeater items="{{ myItems }}">
 //     <Repeater.itemTemplate>
-//        <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" />
+//        <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
 //     </Repeater.itemTemplate>
 //  </Repeater>{%endraw%}
 // </Page>
diff --git a/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml b/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
index 4fe8e30f7..66947b5fd 100644
--- a/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
+++ b/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
@@ -1,4 +1,4 @@
-<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
+<StackLayout xmlns:customControls="xml-declaration/mymodule" class="MySecondCustomStackLayout">
   <Label id="Label1" text="mymodulewithxml" />
   <Button text="Click!" tap="buttonTap2" /> 
 </StackLayout>
diff --git a/apps/tests/xml-declaration/xml-declaration-tests.ts b/apps/tests/xml-declaration/xml-declaration-tests.ts
index 5f933a2bf..f7f9759c4 100644
--- a/apps/tests/xml-declaration/xml-declaration-tests.ts
+++ b/apps/tests/xml-declaration/xml-declaration-tests.ts
@@ -201,7 +201,7 @@ export function test_parse_ShouldResolveExportsFromCodeFileForTemplates() {
 export function test_parse_ShouldApplyCssFromCssFile() {
     var newPage: Page;
     var pageFactory = function (): Page {
-        newPage = <Page>builder.parse("<Page cssFile='~/xml-declaration/custom-css-file.css'><Label cssClass='MyClass' /></Page>");
+        newPage = <Page>builder.parse("<Page cssFile='~/xml-declaration/custom-css-file.css'><Label class='MyClass' /></Page>");
         return newPage;
     };
 
@@ -218,7 +218,7 @@ export function test_parse_ShouldApplyCssFromCssFile() {
 export function test_parse_ShouldResolveExportsFromCodeFileAndApplyCssFile() {
     var newPage: Page;
     var pageFactory = function (): Page {
-        newPage = <Page>builder.parse("<Page codeFile='~/xml-declaration/custom-code-file' cssFile='~/xml-declaration/custom-css-file.css' loaded='loaded'><Label cssClass='MyClass' /></Page>");
+        newPage = <Page>builder.parse("<Page codeFile='~/xml-declaration/custom-code-file' cssFile='~/xml-declaration/custom-css-file.css' loaded='loaded'><Label class='MyClass' /></Page>");
         return newPage;
     };
 
diff --git a/apps/ui-tests-app/image-view/roundimg.xml b/apps/ui-tests-app/image-view/roundimg.xml
index 50a40066e..b09c2462d 100644
--- a/apps/ui-tests-app/image-view/roundimg.xml
+++ b/apps/ui-tests-app/image-view/roundimg.xml
@@ -1,10 +1,10 @@
 <Page>
   <GridLayout rows="*,*,*" columns="*,*">
-    <Image row="0" col="0" src="~/image-view/gravatar.png" cssClass="one"/>
-    <Image row="0" col="1" src="~/image-view/gravatar.png" cssClass="two"/>
-    <Image row="1" col="0" src="~/image-view/gravatar.png" cssClass="three"/>
-    <Image row="1" col="1" src="~/image-view/gravatar.png" cssClass="four"/>
-    <Image row="2" col="0" src="~/image-view/gravatar.png" cssClass="five"/>
-    <Image row="2" col="1" src="~/image-view/gravatar.png" cssClass="six"/>
+    <Image row="0" col="0" src="~/image-view/gravatar.png" class="one"/>
+    <Image row="0" col="1" src="~/image-view/gravatar.png" class="two"/>
+    <Image row="1" col="0" src="~/image-view/gravatar.png" class="three"/>
+    <Image row="1" col="1" src="~/image-view/gravatar.png" class="four"/>
+    <Image row="2" col="0" src="~/image-view/gravatar.png" class="five"/>
+    <Image row="2" col="1" src="~/image-view/gravatar.png" class="six"/>
   </GridLayout>
 </Page>
\ No newline at end of file
diff --git a/ui/core/view-common.ts b/ui/core/view-common.ts
index 358ef8d56..eb9670586 100644
--- a/ui/core/view-common.ts
+++ b/ui/core/view-common.ts
@@ -14,6 +14,11 @@ import utils = require("utils/utils");
 import color = require("color");
 import animationModule = require("ui/animation");
 import observable = require("data/observable");
+import {registerSpecialProperty} from "ui/builder/special-properties";
+
+registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
+    instance.cssClass = propertyValue;
+});
 
 export function isEventOrGesture(name: string, view: View): boolean {
     if (types.isString(name)) {