About the Web Target style and style sheet editors
Style sheet editors simplify the process for creating cascading
style sheets or embedded or inline styles through the use of tabs
and property sheets. You can access the following style and style
sheet editors in PowerBuilder:
| Style sheet editor | How to open | What to use it for |
|---|---|---|
| Global | Select Edit>Global Style Sheet when a Web page is open in the HTML editor. |
Add links to external files or embedded styles to the current HTML page. Can use to create styles for HTML elements, classes, and IDs. |
| Standalone | Double-click a CSS file in the System Tree or, when a Web page is not open in the HTML editor, drag and drop a CSS file into the editor area. The Cascading Style Sheet wizard also opens this editor. |
Create or modify external files. Can use to create styles for HTML elements, classes and IDs. The external file must be linked to a Web page for these styles to be used by the page. |
| Inline | Click the Inline Styles tab from the property sheet for any HTML element in the current Web page in the HTML editor. Select the Inline radio button and click Edit. |
Create or modify styles for the selected HTML element in the current Web page. |
Style sheet components
The style sheet editors inside PowerBuilder are composed of
the following components:
Style sheet tree The left pane of the Global Style Sheet editor provides a
list of current embedded styles and links to external style sheets,
as well as to elements included in embedded style tags. When you
add a new element, or selector, it appears in the left pane under
the embedded style to which it was added.The left pane of the standalone
Style Sheet editor includes a list of all styles in the open style
sheet. Imported style sheets are also displayed in the left pane
of these style sheet editors.
Style sheet tab pages The right panes of the Global Style Sheet editor and the standalone
Style Sheet editor provide a series of tab pages that give you quick
access to style attributes. The Inline Styles editor interface is
composed entirely of these style sheet tab pages.
The tab pages group similar attributes: font style, margin
settings, and so on. When you select attributes for an element,
the editor inserts the correct syntax for your style definition.
Style sheet source The standalone Style Sheet editor tab pages include a Source
tab page. The other tab pages generate style sheet syntax that you
can view in the Source tab page. You can also use this page to copy
and paste elements between CSS files.
Support for CSS2
The style
sheet editors support styles for both formatting and layout as specified
in the CSS2 (Cascading Style Sheets, level 2) specification. Current versions
of the Internet Explorer and Netscape browsers implement CSS2.
For information about the CSS2 specification, go to the Web
site for the World Wide Web Consortium
.
The Style Sheet editor tab page interface
All Web Target
style sheet editors provide tab pages that allow you to create and
modify style or style sheet attributes easily. The tabs are grayed
if a selected element in the style sheet editor or HTML page does
not support any of the attributes available on the tab page, or
if no element is selected.
The following table lists the attributes available for each
tab page.
| Tab page | Style attribute |
|---|---|
| Advanced | Aural attributes and the following style attributes: content, counter increment, counter reset, direction, marker offset, quotes, text shadow, and unicode-bidi |
| Background | Background position, attachment, image, repeat, and color |
| Border | Border width, color, and style |
| Font | Font family, size, color, style, variant, weight, stretch, size adjustment, and line height |
| List | Attributes for list items: image, position, and type |
| Margin | Margins for all sides of an element |
| Padding | Padding for all sides of an element |
| Printing attributes: page size, page break before, page break after, page break inside, marks, orphans, and widows |
|
| Source | HTML source code (standalone Style Sheet editor only) |
| Table | Table attributes: caption side, layout, border collapse, empty cells, speak header, and border spacing |
| Text | Text alignment, decoration, transform, white space, indent, letter spacing, and word spacing |
| Visual | Display, position, visibility, clear, z-index, overflow, vertical alignment, clip, and cursor |
Integration with other Web Target editors
The editors
used in Web targets provide integrated support for creating and maintaining
style components in your projects.
HTML editor
The HTML editor provides direct access to the style sheet
editor. When you are working on a page in the HTML editor, you can
open the Global Style Sheet editor to:
- Link
the current page to external style sheets - Embed styles by inserting the STYLE element to the
Head section of the HTML page
You can use the Inline Styles editor to add inline styles
through the property sheets for individual elements on the current
Web page.
The style sheet editors add the appropriate syntax to your
file.
Script editor
In the Script editor,
you add style objects (typically generic IDs created with the Style
Sheet editor) to scripts. Scripts let you produce dynamic style implementations.
These scripts can be internal or external to an HTML document.
If you plan to implement selector IDs in scripts, you should
be familiar with the naming conventions for these components in
the scripting language you use.