Style Sheets

The Style menu allows you to change the appearance of your documents by two different means:

• using Cascading Style Sheets (CSS).
• using HTML elements and attributes.

The first entries of the Style menu are dedicated to CSS, the last two entries to HTML elements.

Cascading Style Sheets

Creating and updating style attributes

Each of the first four entries of the Style menu call a dialog box that allows associating a style attribute with the currently selected elements:

• Character Style allows choosing the font family, the character style, the body size and the underline style.
• Colors allows choosing the foreground and background colors from a palette. Click on a palette cell with the left button to set the foreground color, click with the middle button to set the background color.
• Format allows setting alignment, indentation, justification and linespacing.
• Background Image allows choosing a background image and its repeat mode.

In all these dialog boxes, Default buttons allow you to remove the corresponding style information from the selected elements.

All modifications made with these dialog boxes can be viewed immediately in both the Formatted view and the Structure view.

Changing Width and Height of elements

The width and height of any element in a document can be changed interactively, in the same way as image map areas. By pressing the Control key on the keyboard and the middle button of the mouse, you can resize the box associated with the element under the cursor. When you release the mouse button, the element size is changed and a style attribute is associated with the element.

When the resized element is an image, this image is zoomed to fill its new box.

Creating, updating and using classes

When a style attribute has been associated with an element, you can use that element as a model for creating or modifying a style rule. Select this element (you must select only one element and this element must have a style attribute) and choose Create Rule from the Style menu. A dialog box pops up that displays a list of CSS selectors. This list comprises all classes that are defined for the current document as well as, the element types to which some style is associated.. Choose a selector in this list or enter a new class name or type name and press the Confirm button. 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 you have created new classes with the Create Rule command, you can associate these classes with some elements in the document document. Choose Apply Class from the Style menu. A dialog box pops up which displays all existing classes. Choose one of these classes. The selected elements are then displayed with the style associated with the chosen class.

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

Managing external CSS style sheets

The entry Style Sheets gives access to a set of commands which allows one to control external and User's preference CSS style sheets:

• The command Link allows one to link a new CSS style sheet to the current document. One can click directly the target style sheet if it is already displayed in a Amaya window. In other case the user should click in the current document to get a dialog box and type the target style sheet's URI. This command adds an element link with its attributes into the head of the document.
• The command Open allows one to open one of the CSS style sheets applied to the current document.
• The command Disable allows one to remove effects of one of the enabled CSS style sheets to the current document. This command doesn't affect the CSS link in the document.
• The commandEnable allows one to re-apply effects of one of the disabled CSS style sheets to the current document. This command doesn't affect the CSS link in the document.
• The command Remove allows one to remove one of the external CSS style sheets. This command acts as the Disable command but in addition to that the element link which attaches the external CSS style sheet is removed.

Commands Open, Disable and Enable can be applied to the User's preference style sheet, but commands Link and Remove concern only linked CSS style sheets. The following figure shows the list of CSS style sheets proposed for the command Open. If no CSS style sheet is currently applied to a document, a dialog box explains that there is "No CSS file available".

Style through HTML elements

HTML provides some character-level elements that allow you to associate style with character strings. Two entries from the Style menu allow you to handle these HTML elements.

Creating HTML style elements

Item Information type from the Style menu presents a submenu offering a choice of HTML elements that define abstract styles. Select first a character string in your page and then choose an item in this menu. The selected character string receives the corresponding style. Three of these styles are also available through buttons: emphasis (), strong () and code ().

Item Character elements from the Style menu offers another menu for changing the style of text. The first entries of this menu could be replaced by CSS and should not be used. They are here only for the sake of completeness of the HTML 3.2 implementation.

Removing style

To remove style from a character string, select the string first and re-apply the command that was used for associating the style you want to remove. All commands in the submenus Information Type and Character Element toggle themselves if re-applied.