diff --git a/apps/app/ui-tests-app/action-bar/background-css.css b/apps/app/ui-tests-app/action-bar/background-css.css
new file mode 100644
index 000000000..adba23489
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/background-css.css
@@ -0,0 +1,3 @@
+.action {
+  background-color: red;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/background-css.ts b/apps/app/ui-tests-app/action-bar/background-css.ts
new file mode 100644
index 000000000..84b0c257d
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/background-css.ts
@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("ui-tests-app/action-bar/clean");
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/background-css.xml b/apps/app/ui-tests-app/action-bar/background-css.xml
new file mode 100644
index 000000000..317736b57
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/background-css.xml
@@ -0,0 +1,6 @@
+<Page>
+  <ActionBar title="This is RED" class="action" />
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
index 24f418d93..09e62ba82 100644
--- a/apps/app/ui-tests-app/action-bar/main-page.ts
+++ b/apps/app/ui-tests-app/action-bar/main-page.ts
@@ -16,6 +16,7 @@ export function pageLoaded(args: EventData) {
     examples.set("actIcons", "action-bar/system-icons");
     examples.set("actView", "action-bar/action-view");
     examples.set("actionItemPosition", "action-bar/action-item-position");
+    examples.set("actBGCss", "action-bar/background-css");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 981e370ff..28a050148 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -10,13 +10,13 @@ import utils = require("utils/utils");
 import color = require("color");
 import observable = require("data/observable");
 import keyframeAnimationModule = require("ui/animation/keyframe-animation");
-import {PropertyMetadata, ProxyObject} from "ui/core/proxy";
-import {PropertyMetadataSettings, PropertyChangeData, Property, ValueSource, PropertyMetadata as doPropertyMetadata} from "ui/core/dependency-observable";
-import {registerSpecialProperty} from "ui/builder/special-properties";
-import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
+import { PropertyMetadata, ProxyObject } from "ui/core/proxy";
+import { PropertyMetadataSettings, PropertyChangeData, Property, ValueSource, PropertyMetadata as doPropertyMetadata } from "ui/core/dependency-observable";
+import { registerSpecialProperty } from "ui/builder/special-properties";
+import { CommonLayoutParams, nativeLayoutParamsProperty } from "ui/styling/style";
 import * as animModule from "ui/animation";
-import {CssState} from "ui/styling/style-scope";
-import {Source} from "utils/debug";
+import { CssState } from "ui/styling/style-scope";
+import { Source } from "utils/debug";
 
 registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
     instance.className = propertyValue;
@@ -99,7 +99,7 @@ export function getAncestor(view: View, criterion: string | Function): definitio
     return null;
 }
 
-export function PseudoClassHandler(... pseudoClasses: string[]): MethodDecorator {
+export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator {
     let stateEventNames = pseudoClasses.map(s => ":" + s);
     let listeners = Symbol("listeners");
     return <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
@@ -555,7 +555,7 @@ export class View extends ProxyObject implements definition.View {
         if (value === false) {
             this._goToVisualState('disabled');
         } else {
-            this._goToVisualState('normal');   
+            this._goToVisualState('normal');
         }
     }
 
@@ -647,8 +647,7 @@ export class View extends ProxyObject implements definition.View {
     }
 
     public onUnloaded() {
-        this._onCssStateChange(this._cssState, null);
-        this._cssState = null;
+        this._setCssState(null);
 
         this._unloadEachChildView();
 
@@ -734,8 +733,8 @@ export class View extends ProxyObject implements definition.View {
 
     public getMeasuredState(): number {
         return (this._measuredWidth & utils.layout.MEASURED_STATE_MASK)
-                | ((this._measuredHeight >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT)
-                        & (utils.layout.MEASURED_STATE_MASK >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT));
+            | ((this._measuredHeight >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT)
+                & (utils.layout.MEASURED_STATE_MASK >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT));
     }
 
     public setMeasuredDimension(measuredWidth: number, measuredHeight: number): void {
@@ -1010,7 +1009,7 @@ export class View extends ProxyObject implements definition.View {
     }
 
     protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void {
-        if(!view) {
+        if (!view) {
             return;
         }
 
@@ -1020,39 +1019,39 @@ export class View extends ProxyObject implements definition.View {
         let availableHeight = utils.layout.getMeasureSpecSize(heightMeasureSpec);
         let heightSpec = utils.layout.getMeasureSpecMode(heightMeasureSpec);
 
-         let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
+        let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
 
-         if (widthSpec !== utils.layout.UNSPECIFIED) {
-             if (lp.widthPercent > 0) {
-                 lp.width = Math.round(availableWidth * lp.widthPercent);
-             }
+        if (widthSpec !== utils.layout.UNSPECIFIED) {
+            if (lp.widthPercent > 0) {
+                lp.width = Math.round(availableWidth * lp.widthPercent);
+            }
 
-             if (lp.leftMarginPercent > 0) {
-                 lp.leftMargin = Math.round(availableWidth * lp.leftMarginPercent);
-             }
+            if (lp.leftMarginPercent > 0) {
+                lp.leftMargin = Math.round(availableWidth * lp.leftMarginPercent);
+            }
 
-             if (lp.rightMarginPercent > 0) {
-                 lp.rightMargin = Math.round(availableWidth * lp.rightMarginPercent);
-             }
-         }
+            if (lp.rightMarginPercent > 0) {
+                lp.rightMargin = Math.round(availableWidth * lp.rightMarginPercent);
+            }
+        }
 
-         if (heightSpec !== utils.layout.UNSPECIFIED) {
-             if (lp.heightPercent > 0) {
-                 lp.height = Math.round(availableHeight * lp.heightPercent);
-             }
+        if (heightSpec !== utils.layout.UNSPECIFIED) {
+            if (lp.heightPercent > 0) {
+                lp.height = Math.round(availableHeight * lp.heightPercent);
+            }
 
-             if (lp.topMarginPercent > 0) {
-                 lp.topMargin = Math.round(availableHeight * lp.topMarginPercent);
-             }
+            if (lp.topMarginPercent > 0) {
+                lp.topMargin = Math.round(availableHeight * lp.topMarginPercent);
+            }
 
-             if (lp.bottomMarginPercent > 0) {
-                 lp.bottomMargin = Math.round(availableHeight * lp.bottomMarginPercent);
-             }
-         }
+            if (lp.bottomMarginPercent > 0) {
+                lp.bottomMargin = Math.round(availableHeight * lp.bottomMarginPercent);
+            }
+        }
     }
 
     protected static restoreChildOriginalParams(view: View): void {
-        if(!view) {
+        if (!view) {
             return;
         }
         let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
@@ -1180,8 +1179,7 @@ export class View extends ProxyObject implements definition.View {
         if (!view) {
             throw new Error("Expecting a valid View instance.");
         }
-        if(!(view instanceof View))
-        {
+        if (!(view instanceof View)) {
             throw new Error(view + " is not a valid View instance.");
         }
         if (view._parent) {
@@ -1439,7 +1437,9 @@ export class View extends ProxyObject implements definition.View {
     }
 
     // TODO: Make sure the state is set to null and this is called on unloaded to clean up change listeners...
-    _onCssStateChange(previous: CssState, next: CssState): void {
+    _setCssState(next: CssState): void {
+        const previous = this._cssState;
+        this._cssState = next;
 
         if (!this._invalidateCssHandler) {
             this._invalidateCssHandler = () => {
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index c7ed830ac..1373a15a9 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -605,7 +605,7 @@ declare module "ui/core/view" {
         _domId: number;
 
         _cssState: any /* "ui/styling/style-scope" */;
-        _onCssStateChange(previous: any /* "ui/styling/style-scope" */, any /* "ui/styling/style-scope" */);
+        _setCssState(next: any /* "ui/styling/style-scope" */);
 
         _registerAnimation(animation: keyframeAnimationModule.KeyframeAnimation);
         _unregisterAnimation(animation: keyframeAnimationModule.KeyframeAnimation);
diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
index e3e91bc9b..ce471ae50 100644
--- a/tns-core-modules/ui/styling/style-scope.ts
+++ b/tns-core-modules/ui/styling/style-scope.ts
@@ -201,10 +201,8 @@ export class StyleScope {
 
         let state = this._selectors.query(view);
 
-        let previousState = view._cssState;
         let nextState = new CssState(view, state);
-        view._cssState = nextState;
-        view._onCssStateChange(previousState, nextState);
+        view._setCssState(nextState);
     }
 
     public query(node: Node): SelectorCore[] {