Introduction

This is the forth article in the series on creating a cross-browser online Rich Text Editor. In Part I, Part II and Part III we have created the application layout as well as built most of the functionality. In this iteration we will style the editor interface so that by look and behavior it resembles an Office application. In addition we will further modify the toolbar so that it reflects the selection by flipping corresponding interface buttons to “on” state if the formatting has been applied to the selection.

Office Style

First of all let’s make the look of our application toolbar a little more believable.

My choice was the Microsoft Office look. You are of course by no means limited to that.
As always, once you understand the principle you will be able to make up your own “skin” for the toolbar.
At this point all we have to do is modify the CSS declarations on the page to immediately change the toolbar’s appearance.
The new declarations are marked below in bold.