• Cascading Style Sheets (CSS)
  • Creating CSS properties
  • About Linking External and User Style Sheets
    • Handling External CSS Style Sheets
  • Showing Applied Style
  • Associating a Class to an Element
    • Creating a Generic Style for an Element or Class
  • About Applying Style Using HTML Elements
  • Creating HTML Style Elements
    • Information type Elements
    • Character Elements
    • Removing Style Elements

Cascading Style Sheets (CSS)

The Style menu enables you to change the appearance of your documents using Cascading Style Sheets (CSS)

Creating CSS properties

The CSS Style entry in the Style menu, or the button, enables you to generate a list of CSS properties. This entry menu displays a dialog box with 4 different tabs: Characters, Colors, Boxes, Format.

When a set of properties are set, the user can apply them to the current selection:

• If the selection is within a formatted view, Amaya will generate span elements with a style attribute or a style attribute on the current element.
• If the selection is within the source view, or a within a CSS file, Amaya will generate a string at the current position.

In any case image paths included in the list of properties (background-image, list-style-image) are transformed into relative paths to the selected document.

About Linking External and User Style Sheets

A document can link to several external style sheets that are downloaded with the document and applied to it.

An external style sheet can apply to multiple documents. When the same style sheet applies to several displayed documents, Amaya loads only one instance of the style sheet.

Any user can define a specific style sheet that applies to all documents loaded on their system. This style sheet is called the user's style sheet. It is stored in the user's local environment, in the AmayaHome directory as the local file amaya.css.

For example, if you prefer to display documents in Helvetica on your screen and print them in small size, you can create a user's style sheet with following CSS rules:

@media print {
body {font-size: 10pt}
}
@media screen {
body {font-family: Helvetica}
}

Handling External CSS Style Sheets

The Style menu provides a set of commands which enable you to control external and user's CSS style sheets.

• Select Link to link a new CSS style sheet to the current document. Amaya displays a pointing hand cursor.

  This command shows a dialog box.

  • If the target CSS style sheet is displayed in another Amaya window and you want to select it by click, click the Click button then click anywhere within that window to create the link.
  • If the target CSS style sheet is displayed in another tab and you want to select it by click, click the Click button then change the current tab and click anywhere within the target CSS style sheet to create the link.
  • If the target CSS style sheet is a local file you can use the Browse button to select it.
  • Else type the URI (like http://www.w3.org/file.css) of the target CSS style sheet and then Confirm to create the link.

• Select Open to open a CSS style sheet applied to the current document.

• Select Disable to remove the effect of an enabled CSS style sheet from the current document. This command does not affect the CSS link in the document.

• Select Enable to reapply the effects of a disabled CSS style sheet to the current document. This command does not affect the CSS link in the document.

• Select Remove to remove an external CSS style sheet. This command is similar to the Disable command, but it also removes the element link that attaches the external CSS style sheet.

The Open, Disable and Enable commands can be applied to the user's preference style sheet, but the Link and Remove commands apply to only external CSS style sheets.

Showing Applied Style

If there are a lot of style sheets attached to a document, it's difficult to understand why an element is displayed with that color or these margins, etc. To help the user, Amaya provides a Show applied style command that displays into an external window CSS style properties applied to the first current selected element.

The user can then display the CSS source that generates each property by double (or simple) click on the property. As long as the window is open, Amaya updates the window content when the selection changes.

By hitting F2, the user can see CSS properties applied to enclosing elements. When the user changes the selection by clicking an element in the path of the status bar, displayed at the bottom of the window, CSS properties are updated too.

Associating a Class to an Element

All classes available for the document are listed in the Apply Class tool.

To apply a class to an element:

1. Choose the right entry within the Apply Class tool.
2. If you want to select the class applied to another element, you have to select this element, then click the button. The Apply Class list is refreshed and the current applied class is selected.
3. Select a piece of text or an element.
   To select an element, you have to click within the element, then use the F2 key until the bottom line of the window displays its type in first position. You can also use the Structure view to select it.
4. Click the button to apply the class to the current selection.
   If a piece of text is selected, Amaya will generate a span element to enclose the current text and the class attribute will be attached to this new span element.

To associate a class with an element, you can also use the Attributes tool. This Attributes tool also enables you to delete a class attribute from an element or to change it (the class attribute is handled like any other attribute).

To remove the class of an element:

• You can edit the class attribute in the Attributes tool.

  When the element is selected, you click on the [X] of the entry to remove the class attribute, or you click on the entry and edit its value then confirm with the apply ( ) button.

• You can also remove or edit the class attribute in the structure view.

  To remove the class attribute, you click in the value, F2 lets you select the whole value, then hit the Delete key twice.

Creating a Generic Style for an Element or Class

When a style attribute is associated with an element, you can use that element as a model for creating or modifying a style rule by using the Create Rule command.

To create a generic style for an element or class:

1. Select the element you wish to use as the template. By default the selection is set to the character string, and you have to press the F2 key to select the enclosing element.

   Note: You must select only one element and this element must have a style attribute.

2. Choose Create Rule from the Style menu. Amaya opens a dialog displaying a list of CSS selectors. This list contains all classes that are defined for the current document (including those defined in linked CSS style sheets), as well as the element type to which the style is associated.

3. Choose a selector in this list or enter a new class name and click Confirm.

   The style of the selected element is then associated with the chosen selector and the style attribute is removed from the selected element. Its content is moved to the style element, in the document HEAD, and all elements matching the selector are displayed with the new style.

When a new class is created with the command Create Rule, this class is automatically added to the list of the Apply Class tool.

About Applying Style Using HTML Elements

HTML provides some character-level elements so you can associate style with character strings. Two options on the XHTML menu enable you to handle these HTML elements:

• Information type
• Character element

Creating HTML Style Elements

Two submenus on the XHTML menu enable you to add HTML elements to your CSS style sheet: Information Type and Character Elements.

Information type elements

The Information Type submenu lists HTML elements that define abstract styles.

To apply an information type:

1. Select a character string in your page.
2. Choose an option from the Information Types submenu.

   The selected character string displays in the chosen style.

Five of these Information elements are also available in the XHTML tool: emphasis ( ), strong ( ) code ( ), insertion ( ), and deletion ( ).

Character Elements

The Character Elements submenu of the XHTML menu provides another set of style elements.

To apply a character element:

1. Select a character string in your page.
2. Choose an option from the Character Elements submenu.

   The selected character string displays the chosen style.

Two of these Character elements are also available in the XHTML tool: ^superscript ( ), and _subscript ( ).

Removing Information type or Character Elements

 All commands of the submenus Information type Elements and Character Elements are removed when you apply them twice.

To remove a style element:

1. Select within the element you want to remove.
2. Reapply the command from the Information Type or Character Elements submenu of the XHTML menu, or in the XHTML tool: emphasis ( ), strong ( ), code ( ), insertion ( ), and deleltion ( ), ^superscript ( ), and _subscript ( ).