Cascading Style Sheet (CSS) Designer

CSS Designer shows the source of a style sheet and enables you to edit styles with the help of syntax highlighting, content assist, and Preview function. The modifications made in CSS Designer are immediately applied to the Design and Split panes of Page Designer if the web page has a link to the style sheet.

This product supports the following World Wide Web Consortium (W3C) cascading style sheet standards:

CSS1 (cascading style sheet level 1)
CSS2 (cascading style sheet level 2)
CSS3 (cascading style sheet level 3)
CSS Mobile Profile 1.0
WCSS 1.0

CSS Designer provides a Source pane and a Preview pane with capabilities that are similar to the three pages of Page Designer, although the orientation and interaction between these panes is slightly different in CSS Designer.

Source

The Source pane enables you to view and work with a file's source code directly. The Properties and Styles views have features that supplement the Source pane. Many of the functions related to creating new styles, applying styles, changing properties, and setting links to style sheets are available from both the CSS Designer Style menu and the Styles view toolbar.

Individual styles in a style sheet are typically defined as follows:

selector { property : value; }

Here is an example of an actual style definition for a paragraph that might appear in a .css file:

P { font-style : italic; font-size : x-small;}

Preview

The Preview pane shows you how the currently defined styles are likely to look when viewed in a browser. You can select an actual web page to apply and display styles created by CSS Designer, or use the sample HTML file, which provides a minimal version of the defined styles. The Preview pane contains two areas: the Selected Style area and Standard HTML Elements area. The Selected Style area is used to display the style effects of a style definition for the area that the cursor (in the Source pane) is in, or the selected style in the Styles view. The Standard HTML Elements area displays styles for standard HTML elements and is not affected by the cursor location.

The Preview is updated automatically if you modify the .css file using the Source pane or Styles view.

The CSS Source pane has many text editing features, such as:

Table 1. Text editing features of CSS Designer
Feature	Description
syntax highlighting	Each syntax element is highlighted differently, enabling you to easily find a certain kind of element for editing. Syntax highlighting is valuable in locating syntax errors.
unlimited undo and redo	You can incrementally undo and redo every change made to a file for the entire editing session. For text, changes are incremented by one character or set of selected characters at a time.
content assist	Content assist helps you to finish content or lines of code and insert macros. Choices available in the content assist list are based on features defined by the CSS level specified for the file being edited. Content assist also shows if the property is a CSS3 property and what browsers support particular CSS3 attributes or values.
element selection	Based on the location of your cursor, the element selection indicator highlights the line numbers that include an element in the vertical ruler on the left area of the Source pane.
pop-up menu options	From the editor's pop-up menu, you have many of the same editing options available in the workbench Edit menu.

The Panes menu in the CSS editor enables you to change the orientation and relative size of the Source and Preview panes.

Feedback