CSS Preview in PhpED

CSS Preview feature of NuSphere's Editor combined with CSS code navigator and CSS code completion features provides for easy CSS editing. You can see just how the CSS style elements will be rendered in the browser while you are editing your CSS code.

CSS Preview tab in the Editor

Preview tab is available in the Editor when CSS file (or file assigned CSS as handled in Tools->Settings->Associations) is loaded. If you select Preview tab PhpED will immediately render the file currently being edited as it is shown in the example

Note that you can select external HTML file to preview the appearance of CSS elements and styles, as shown on the picture

CSS Split Preview

CSS Split Preview button provides the ways to see the display of your Cascading Style Sheets and the effect of you editing of CSS source immediately at run time. CSS Split Preview button is located in the gutters of the editor. When CSS Split Preview is selected the Editor window gets split and the bottom part displays the CSS file. The changes made to the source in the top window are immediately reflected in the display (you can set the Delay for the update of the display in Tools->settings->Code Insight Settings):

CS Preview is only one of the many CSS Editor Tools available in PhpED along with PHP Editor Tools, such as CSS code completion and CSS code navigator. You can see these tools in action when you Download a free trial of NuSphere's PHP IDE today!