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 pages of Page Designer if the HTML file has a link to the style sheet.

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

In addition, there is Wireless Application Protocol (WAP) support.

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 page. 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 Web 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 tag type is highlighted differently, enabling you to easily find a certain kind of tag 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 tags or lines of code and insert macros. Choices available in the content assist list are based on tags defined by the tagging standard specified for the file being edited.
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 page.
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.

 

Related tasks

Defining page styles for a Web site - overview

Creating style sheets

Editing style sheets