Basic editing with the style sheet editors

The style sheet editors and wizard allow you to create external
style sheets and link them to your Web pages. You can also create
embedded styles and inline styles and make style assignments to
HTML elements and selectors using the style sheet editors.

Creating an external style sheet

You can use the Cascading Style Sheet wizard to create a new
style sheet. You can also use the wizard to link the new style sheet
to an existing style sheet.

To create an external style sheet:

1. Select File>New.

2. In the New dialog box, click the Web tab and double-click
   the Cascading Style sheet icon.

3. Follow the instructions in the wizard to complete
   the entries required.

   You can specify a name for the style sheet you want to create
   and, optionally, you can link it to an existing style sheet. When
   you click Finish, the new style sheet displays in the standalone
   Style Sheet editor.

   No styles or links to existing style sheets are defined in
   this style sheet:

   

Importing an existing style sheet

You can import a style sheet in the Global Style Sheet editor
and in the standalone Style Sheet editor. The style sheet editors
include a pointer to the imported style sheet using the @import
rule.

Import rules and client browsers Not all browsers support @ rules. You should make
sure the browsers that will be used to view your Web site support
these rules before you link a style sheet through the @import
rule.

To import an existing style sheet:

1. Right-click the STYLE[#] item
   (or the style ID) in the left pane of a style sheet editor.

   This is the top item in the standalone Style Sheet editor.
   This is a second-level item in the Global Style Sheet editor. If
   you assign an ID to a style sheet in the Global Style Sheet editor,
   the ID for the style sheet replaces the generic STYLE[#] listing
   in the left pane of the editor.

2. Select Insert@import from the pop-up
   menu.

3. In the Choose URL dialog box, specify the URL
   of the style sheet that you want to import, save, and click OK.

   A pointer is added to the chosen style sheet. You can view
   the source code for the pointer directly in the Source tab of the
   standalone Style Sheet editor while the topmost item in the left
   pane is selected:

   

   To view the source code generated by the Global Style Sheet
   editor, you must look at the current Web page in the Source view
   of the HTML editor.

Linking an external style sheet to an HTML page

After you create style
sheets for your project, you can link them to your documents using
the Global Style Sheet editor.

To link an external style sheet to an HTML document:

1. Open the HTML file to which you want to
   link a style sheet, and select Edit>Global Style Sheet
   from the HTML editor menu bar.

2. Right-click an item in the left pane of the Global
   Style Sheet editor, and select Insert <LINK> Tag
   item from the pop-up menu.

   The Insert New Link Tag dialog box displays.

   

3. (Optional) Type a title and ID in the appropriate
   text boxes, select a media type from the Media drop-down list, and
   select or clear the Disabled check box.

4. Click the browse (…) button to select a file
   or type the name of the external style sheet to be linked to your
   Web page. Click OK.

   When you close the Global Style Sheet editor, the editor inserts
   the new LINK tag in the Head section of your HTML file with any
   optional attributes you selected.

Embedding style definitions in an HTML page

You can use the Global Style Sheet editor to add embedded
styles to the current page in the HTML editor.

Embedded styles and client browsers Older browsers might not recognize the STYLE element. You
can surround the style definitions with comment tags (as you would
for SCRIPT elements) to direct these browsers to ignore the embedded
style definitions. You must add the comment tags (<!–>)
directly in the Source view for the HTML page.

To add or embed style definitions in an HTML document:

1. Open the HTML file in which you want to
   embed style definitions and select Edit>Global Style Sheet
   from the HTML editor menu bar.

2. Right-click an item in the left pane of the Global
   Style Sheet editor, and select Insert <STYLE> Tag
   from the pop-up menu.

3. (Optional) In the Insert New Style Tag dialog
   box, specify a title and ID in the appropriate text boxes, select
   a media type from the Media drop-down list, and select or clear
   the Disabled check box.

4. In the left pane, right-click the newly specified
   style or another style that you want to edit. Then define styles
   and click OK.

   When you close the Global Style Sheet editor, the editor inserts
   the new STYLE element in the Head section of your HTML file, along
   with any selector styles for HTML elements, classes, and IDs that
   you add.

   Separate STYLE tags are generated in the HTML page for each
   STYLE element you add to the left pane of the Global Style Sheet
   editor. Selector styles are added to the HTML page only between
   STYLE tags that correspond to the STYLE element under which they
   appear in the left pane of the style sheet editor.

Opening an existing style sheet

You open an existing style sheet in the standalone Style Sheet
editor. Although you can import a style sheet and modify embedded
styles with the Global Style Sheet editor, you can open or edit
an external style sheet only by using the standalone editor.

To open an existing style sheet for editing:

1. Right-click the file in the System Tree
   and select Edit from the pop-up menu.

   or

   Drag an existing CSS file from the System Tree to the
   editor area for PowerBuilder.

   If you drag a CSS file while an HTML page is open in the HTML
   editor, the file does not open in the Style Sheet editor, but becomes
   the target of a hyperlink instead.

   For information on linking style sheets to HTML pages, see “Linking an external style
   sheet to an HTML page” .

To open a file that is not part of your Web target:

1. From a drag-and-drop file viewer, such
   as Microsoft Windows Explorer, drag the file into the Web Target
   workspace.

   or

   Select File>Open from the PowerBuilder menu bar
   and browse to find the file in the Open dialog.

Using the Inline Styles editor

You open the Inline Styles editor from the properties dialog
box for HTML elements for the current page in the HTML editor. You
can set inline styles for an element when you drag that element
from the System Tree to an HTML page.

Using the inline style editor to modify HTML tag
elements:

1. From the Page view or Source view of the
   HTML editor, right-click the desired HTML element or control and
   select Properties from the pop-up menu.

2. Select the Inline Styles tab of the properties
   dialog box, select the Inline radio button, and click Edit.

3. On the tab pages of the Inline Styles editor,
   specify the type of style you want to add by selecting or typing
   values for the style attributes.

   Some of the tab pages or items on the tab pages may be grayed
   if they are inappropriate for the selected element. This is the
   Inline Styles editor for a button control:

   

   You can view the generated inline styles in the Style Attributes
   And Values list box on the Inline Styles page of the element property
   sheet, and in the Source view of the HTML editor.

Adding selectors for HTML elements, classes, and
IDs

You can
define styles for HTML tags, classes, and IDs in the Global Style
Sheet editor or in the standalone Style Sheet editor.

Defining styles for HTML element selectors

To define styles for HTML element selectors:

1. Right-click an item in the left pane of
   a style sheet editor, then select Insert HTML Tag Selector from
   the pop-up menu.

   Global Style Sheet editor restrictions In the Global Style Sheet editor, you must right-click an
   embedded STYLE element or an item at a level below an embedded STYLE
   element. If you right-click a LINK element or the topmost StyleSheets
   item, the Insert HTML Tag Selector menu item is grayed.

   You can right-click any item in the left pane of the standalone
   Style Sheet editor to add selectors to an external style sheet.

2. In the Insert New HTML Tag Selector dialog box,
   double-click the tag for which you want to define a style.

   or

   Select the tag to be added to your style sheet and click
   the > button.

   The selected tag is copied into the Selected Tag list box:

   

3. (Optional) Select the Contextual Selector check
   box and add another tag that you nest inside the first tag.

   The styles you select will be applied to the nested element
   only when it is nested below the element at the top of the Selected
   Tag list box. You can change positions of nested elements by selecting
   one of the elements in the list box and clicking the Up or Down
   buttons.

4. Click OK and select the new element in the left
   pane of the style sheet editor.

5. On the tab pages in the right pane of the style
   sheet editor, specify the type of style you want to add for the
   element by selecting or typing values for the style attributes.

6. After you finish setting the style definitions,
   you can insert another element in the external or embedded style
   sheet.

Defining styles for ID Selectors

ID selectors define style rules for an individual element.
You can create an ID in the context of an element, or as a generic
identifier. However, even as a generic identifier, an ID should
be assigned to only one element in a document. IDs can be used within
HTML elements or in scripts.

Web Target style sheet editors use generic IDs as style objects.
Several scripting languages, such as JavaScript and VBScript, can
manipulate these objects to dynamically change the appearance of
elements associated with the ID.

To define styles for ID selectors:

1. Right-click an item in the left pane of
   a style sheet editor, then select Insert ID Selector from the pop-up
   menu.

   Global Style Sheet editor restrictions In the Global Style Sheet editor, you must right-click an
   embedded STYLE element or an item at a level below an embedded STYLE
   element. If you right-click a LINK element or the topmost StyleSheets
   item, the Insert ID Selector menu item is grayed.

   You can right-click any item in the left pane of the standalone
   Style Sheet editor to add selectors to an external style sheet.

2. In the Insert New ID Selector dialog box, identify
   the new ID for the style sheet.

3. To create a generic ID, click OK.

   or

   To assign the ID to an HTML tag, select the For HTML
   Element check box, then select an element and click OK.

   

4. With the new ID selected in the left pane, define
   styles for the ID in the tab pages in the right pane.

Defining styles for class selectors

Class selectors define style rules in the context of a specific
HTML element or as a generic component. When applied to a specific
element, the class is available only with the associated tag. Generic
classes are available as attributes for any tag.

For example, to apply a class at the tag level, you can define
a tag as:

In
an HTML document, the tag would be referenced as H1.NewStyle. The NewStyle
class is available only to H1 tags.

As a generic class, you could define the NewStyle class this
way:

To
implement this style in an H1 tag, you would use this syntax

The Insert New Class Selector dialog includes the following
well-known classes (also called pseudo-classes):

To define styles for classes:

1. Right-click an item in the left pane of
   a style sheet editor, then select Insert Class Selector from the
   pop-up menu.

   Global Style Sheet editor restrictions In the Global Style Sheet editor, you must right-click an
   embedded STYLE element or an item at a level below an embedded STYLE
   element. If you right-click a LINK element or the topmost StyleSheets
   item, the Insert ID Selector menu item is grayed.

   You can right-click any item in the left pane of the standalone
   Style Sheet editor to add selectors to an external style sheet.

2. Select or type a class name in the Insert New
   Class Selector dialog box.

   You can define styles for a new class or for existing classes.

3. To create a generic class, click OK.

   or

   To assign the class to an HTML tag, select the For HTML
   Element check box. Then select an element and click OK.

   

4. With the new class selected in the left pane,
   define styles for the class in the tab pages in the right pane.

Removing items from a style sheet

You can remove style selectors, embedded styles, and linked
style sheets in the Global Style Sheet editor and you can remove
imported style sheets and style selectors in the standalone Style
Sheet editor.

Removing styles using the Inline Styles editor To remove styles using the Inline Styles editor, you can either
set each style attribute to a null value or remove the attributes
directly in the Source view of the HTML editor.

To remove items from a style sheet:

1. In the left pane of
   the style sheet editor, right-click the item that you want to remove.

2. From the pop-up menu, select Delete.

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments