Handling External CSS Style Sheets

The Style Sheets option on 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. If the target style sheet is already displayed in an Amaya window, click the style sheet. If the style sheet is not displayed, click the current document to display a dialog and type the target style sheet's URI. The Link command adds an element link with its attributes into the head of the document.

• 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 linked CSS style sheets.

A dialog shows the list of CSS style sheets proposed for the Open command. If no CSS style sheet is currently applied to a document, the dialog indicates that there is no CSS file available.

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. Hitting F2, the user can see CSS properties applied to enclosing elements.