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 color 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:

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.

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 Refresh 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 ok 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:

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:

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 (Emphasis button ), strong (Strong button ) code (Code button ), insertion (Insertion button ), and deletion (Deletion button ).

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 (Superscript button ), and subscript (Subscript button ).

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 (Emphasis button ), strong (Strong button ), code (Code button ), insertion (Insertion button ), and deleltion (Deletion button ), superscript (Superscript button ), and subscript (Subscript button ).