Editing a Cascading Style Sheet

See Also 

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.

To open a CSS file in the Source Editor:

  1. Right-click the CSS file's node (CSS node icon image) in the Files window.
  2. Choose Edit from the pop-up menu.

    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.

CSS Style Builder

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.

Preview Window

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.

See Also
Creating a Cascading Style Sheet
Checking a Cascading Style Sheet for Validity
Generating DTD Documentation

Legal Notices