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
page 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:
- CSS1 (cascading style sheet level 1)
- CSS2 (cascading style sheet level 2)
- CSS Mobile Profile 1.0
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 DesignerFeature |
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.