Initial crack at using specific traits for styling.

IPython/html/static/widgets/js/widget.js

@@ -419,9 +419,36 @@ define(["widgets/js/manager",
                 var old_classes = model.previous('children');
                 this.update_classes(old_classes, new_classes);
             }, this);
+            this.model.on('change:fore_color', function (model, value) { 
+                this.update_attr('color', value); }, this);
+            this.model.on('change:back_color', function (model, value) { 
+                this.update_attr('background', value); }, this);
+            this.model.on('change:width', function (model, value) { 
+                this.update_attr('width', value); }, this);
+            this.model.on('change:height', function (model, value) { 
+                this.update_attr('height', value); }, this);
+            this.model.on('change:border_color', function (model, value) { 
+                this.update_attr('border-color', value); }, this);
+            this.model.on('change:border_width', function (model, value) { 
+                this.update_attr('border-width', value); }, this);
+            this.model.on('change:border_style', function (model, value) { 
+                this.update_attr('border-style', value); }, this);
+            this.model.on('change:font_style', function (model, value) { 
+                this.update_attr('font-style', value); }, this);
+            this.model.on('change:font_weight', function (model, value) { 
+                this.update_attr('font-weight', value); }, this);
+            this.model.on('change:font_size', function (model, value) { 
+                this.update_attr('font-size', value); }, this);
+            this.model.on('change:font_family', function (model, value) { 
+                this.update_attr('font-family', value); }, this);
             this.update_classes([], this.model.get('_dom_classes'));
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            this.$el.css(name, value);
+        },
+
         update_visible: function(model, value) {
             // Update visibility
             this.$el.toggle(value);

IPython/html/static/widgets/js/widget_box.js

@@ -16,6 +16,11 @@ define([
             }, this);
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            this.$box.css(name, value);
+        },
+
         render: function(){
             // Called when view is rendered.
             this.$box = this.$el;

IPython/html/widgets/widget.py

@@ -18,7 +18,8 @@ import collections
 from IPython.core.getipython import get_ipython
 from IPython.kernel.comm import Comm
 from IPython.config import LoggingConfigurable
-from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, Tuple, Int, Set
+from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, 
+    CaselessStrEnum, Tuple, CTuple, CUnicode, Int, Set
 from IPython.utils.py3compat import string_types
 
 #-----------------------------------------------------------------------------
@@ -381,3 +382,44 @@ class DOMWidget(Widget):
     visible = Bool(True, help="Whether the widget is visible.", sync=True)
     _css = CTuple(sync=True, help="CSS property list: (selector, key, value)")
     _dom_classes = CTuple(sync=True, help="DOM classes applied to widget.$el.")
+    
+    width = CUnicode(sync=True)
+    height = CUnicode(sync=True)
+
+    fore_color = Unicode(sync=True)
+    back_color = Unicode(sync=True)
+    border_color = Unicode(sync=True)
+
+    border_width = CUnicode(sync=True)
+    border_style = CaselessStrEnum(values=[ # http://www.w3schools.com/cssref/pr_border-style.asp
+        'none', 
+        'hidden', 
+        'dotted', 
+        'dashed', 
+        'solid', 
+        'double', 
+        'groove', 
+        'ridge', 
+        'inset', 
+        'outset', 
+        'initial', 
+        'inherit', ''],
+        default_value='', sync=True)
+
+    font_style = CaselessStrEnum(values=[ # http://www.w3schools.com/cssref/pr_font_font-style.asp
+        'normal', 
+        'italic', 
+        'oblique', 
+        'initial', 
+        'inherit', ''], 
+        default_value='', sync=True)
+    font_weight = CaselessStrEnum(values=[ # http://www.w3schools.com/cssref/pr_font_weight.asp
+        'normal', 
+        'bold', 
+        'bolder', 
+        'lighter',
+        'initial', 
+        'inherit', ''] + [str(100 * (i+1)) for i in range(9)], 
+        default_value='', sync=True)
+    font_size = CUnicode(sync=True)
+    font_family = Unicode(sync=True)