External Stylesheets with Kompozer

Kompozer without a Link to an External Stylesheet

This slide shows the extract from the piece by Thoreau without a stylesheet. There is, however, some inline formatting associated with the underlying HTML code, but for the purpose of this exercise it is important only in that in this sequence will illustrate how an external stylesheet can effectively overwrite inline formatting.

External Stylesheets with Kompozer - 1

First Step in Linking to an External Stylesheet

To create a new external stylesheet or to link to an existing stylesheet, select Tools | CSS Tools. The operation will result in the presentation of this menu.

External Stylesheets with Kompozer - 2

Second Step in Linking to an External Stylesheet

Select Link el. by pulling down the icon-based dropdown menu that is located in the upper left corner of the CSS Tools menu.

External Stylesheets with Kompozer - 3

Third Step in Linking to an External Stylesheet

This slide illustrates the selection of an existing stylesheet from the local file system. Please note that you can also link to an existing stylesheet if you have the appropriate URL. Or you may specify the location on the local file system of a new stylesheet. In any event, the process must be completed by clicking on the "Create Stylesheet" button.

External Stylesheets with Kompozer - 4

Link to an External Stylesheet Established

Under Sheets and Rules, you will note that the external stylesheet is now recognized by Kompozer, and that the formatting rules associated with the linked stylesheet have now been imposed on the text.

External Stylesheets with Kompozer - 5

Examining the Rules of the External Stylesheet

Clicking on simple_1.css will reveal the general rules of the stylesheet.

External Stylesheets with Kompozer - 6

Specific Attributes of a Rule

Clicking on a specific rule reveals the attributes assigned to the rule. Please note that the attributes may be edited in the right panel. Changes are imposed on the text automatically.

External Stylesheets with Kompozer - 7

Results
This slide illustrates how the external stylesheet has altered the formatting of the text.

Linking Syntax at the HTML Coding Level

This slide illustrates how the link to an external stylesheet is implemented at the source code level.

External Stylesheets with Kompozer - 8

External Stylesheets with Kompozer - 9