About the CSS Source Editor

The CSS Source Editor is a full-featured text editor that is integrated with other parts of the IDE. You open the Source Editor by creating a new CSS file or double-clicking a CSS file node in the Projects window, Files window, or Navigator window.

The CSS editor has the following features:

Tabs
Toolbar
Left Margin
Error Stripe
Status Line
Syntax Coloring
Code Completion
CSS Style Builder
Pair Completion
Insert Mode and Overwrite Mode
Preview Window

Source Editor Tabs

The top of the Source Editor has a tab for each open document. Each tab shows the name of the document. If the document has been modified and has not been saved, there is an asterisk (*) after its name.

If multiple files are open, you can split the Source Editor view by clicking and dragging the tab. As you drag to different parts of the editing area, you see a red outline that shows you where the new window will open. When one of these boxes appears, you can drop the document and split the pane.

You can right-click a tab to access the following commands:

Toolbar

The editor toolbar is at the top of the Source Editor window. The toolbar has buttons for various navigating and editing shortcuts, which vary according to the type of file you are editing. Hold the cursor over a button to display a description of the command.

Left Margin

The left margin displays annotation glyphs that indicate line status, such as warnings.

You can right-click the left margin to display a pop-up menu. The margin can also optionally display line numbers.

Error Stripe

The error stripe is the strip to the right of the right scroll bar and contains marks for various things in your file, such as errors, bookmarks, and comments for the To Do list. The error stripe represents the whole file, not just the lines currently displayed. You can immediately identify whether your file has any errors without having to scroll through the entire file. You can double-click a mark in the error stripe to jump to the line that the mark refers to.

Status Line

The Source Editor status line is in the bottom right corner of the IDE. The first area of the status line shows the current line number and row number in the form line:row. The second area of the status line indicates the insertion mode (INS or OVR). The text area on the right is used for status messages.

Syntax Coloring

Source code displayed in the Source Editor is syntactically colored. For example, all CSS keywords are shown in blue and all CSS comments in light gray.

Code Completion

The IDE's code completion feature helps you fill in code and tags as you are typing. Code completion is available for CSS, HTML, and XML files.

Pair Completion

When you edit CSS, the Source Editor does matching of pair characters such as brackets, parentheses, and quotation marks. Closing characters are not duplicated if you type them yourself rather than letting the editor add them for you.

Insert Mode and Overwrite Mode

When the Source Editor is in insert mode, the default insertion point is a vertical bar, and text that you type is inserted. In overwrite mode, the default insertion point is a solid block, and text that you type replaces the existing text.

Use the Insert key to toggle between the two modes.

Whenever the insertion point in the Source Editor is located immediately after a brace, bracket, or parenthesis, the matching brace, bracket, or parenthesis is highlighted.

CSS Style Builder

The IDE includes a CSS Style Builder. The Style Builder helps you build up a style for each HTML element by showing you different possibilities for the element.

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.


Legal Notices