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:
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:
The editor toolbar at the top of the Source Editor window has buttons for various navigating and editing shortcuts. Hold the cursor over a button to display a description of the command.
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.
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.
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.
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.
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.
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.
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.
The IDE includes a CSS Styles window that can help you define the properties and values for each HTML element. For each property you can select standard values from a dropdown list. You can use the upper pane of the CSS Styles window to quickly locate and navigate to elements in the style sheet.
If the CSS Styles window does not open when you open the CSS file you can open the window by choosing Window > Web > CSS Styles from the main menu. The CSS Styles window opens in the main window next to the Editor window.