When editing CSS files, you can take advantage of typical Source Editor features, including indentation, syntax coloring, and standard clipboard commands. NetBeans IDE also provides a CSS Style Builder and a Preview window. Use these features together to experiment with different styles.
The IDE opens the CSS file in a new Source Editor tab and shifts focus to it. Alternately, you can also simply double-click the file's node in the Files window.
To open the Style Builder, go to Window > Other > CSS Style Builder. The Style Builder opens below the Editor window.
To use the Style Builder, go to the Editor window and place your cursor in the element whose style you want to define. A set of tabs appear in the Style Builder. The tabs correspond to style categories, such as Font and Background. Select a tab and select style settings in that tab. For example, to set the font of the <h2> element as Verdana, find h2 in the Editor, open the Font tab in the Style builder, and select "Verdana, Arial, Helvetica, sans-serif" in the list of fonts.
The IDE provides a Preview window in which you can preview what HTML elements look like according to your CSS. By default, the Preview window appears below and to the right of the Editor window when you open a CSS file. If the Preview window is closed, open it by going to Window > Other > CSS Preview.
The Preview window requires a CSS Previewer plugin. The NetBeans Update Center includes one CSS Previewer, the Flying Saucer Renderer. To install Flying Saucer, go to Tools > Plugins, open the Available Plugins tab, and find the CSS Preview Flying Saucer plugin.
To use the Preview window, select a CSS element in the Editor window. If the previewer can render the element, sample text in that style appears in the Preview window.