Go to TopLinking to an Existing Stylesheet

In the various demonstrations and examples of code in the section of the site, Additional Master Page Features you will find a number of sample files all of which include Internal stylesheets holding the CSS code that is the subject of the demonstration.

If you wish to use the demonstration code in your own site, and perhaps edit it further, you could export the demonstration stylesheet so creating a specific external stylesheet that contains the CSS code to create that menu, image gallery or other feature. You can then link your master page to that additional stylesheet. Note that there is nothing to stop you linking a page to a number of stylesheets. Indeed, it is the only way to do it if you wish to produce sites that take on a different appearance when sent to different media types.

Go to TopLoad the Demonstration File

Open Web Location Dialogue

1. Visit the demonstration page in your browser and copy the URL of the page required. (Probably most easily done by clicking in the Address Bar to select the address and then hitting CTRL-C.)

2. Switch to KompoZer, open the FILE menu and select "Open Web Location...". (The "Create a new document or template" appears.)

3. Paste the copied URL into the field in the "Create a new document or template" and click the "Create" button. (This will load the page into KompoZer. You can now follow the instructions in the next next to export the stylesheet found in the demonstration file.)

Open Location Dialogue

Go to TopExport the Internal Stylesheet

1. On KompoZer's main window, click the CSS (Artist's Palette) toolbar button to open the CSS Stylesheets dialogue.

2. Once open, click the "internal stylesheet" item in the left pane and then the Refresh (twin arrows) button on the toolbar. This changes the right pane to that shown below.

Exporting an Internal Stylesheet
The CSS Editor - New Rule Pane

3. Click the large button "Export stylesheet and switch to exported version".

4. On the "Select a CSS File" dialogue that opens, navigate to the folder where your web site folder and enter an appropriate file name in the dialogue. Don't forget the ".css" in the file name. Some browsers won't read the file if that extension is missing!

5. Click the "Save" button.

The Internal stylesheet has been converted to an external stylesheet and the left pane reflects the change.

Go to TopLink to the Exported Stylesheet

Link a stylsheet

Having created the additional stylesheet it must be linked to your own master page file. complete the following steps:

1. Open or switch to your Master Page file and click the CSS (Artist's Palette) toolbar button to open the Stylesheet Editor.

2. On the CSS Stylesheets dialogue, click on the arrowhead beside the Artist's Palette button and select the "Linked Stylesheet" option from the menu that appears. (The CSS Stylesheets dialogue appears, showing the "New Linked Stylesheet" pane.)

3. On the right pane of the dialogue, click the "Choose File" button. (A "Select a CSS File" dialogue appears.)

4. On the dialogue, navigate to newly saved exported CSS file and select it. (Its name appears in the "URL:" field.)

The Linked Stylesheets pane

5. Click the "Create Stylesheet" button to link the saved stylesheet file to the current page. (There will now be the existing Master Page Internal Stylesheet listed on the left pane of the dialogue, assuming you haven't already exported it, and well as the newly linked external stylesheet, as shown below.)

Stylesheet link made

1. Any new rule will be created in the currently selected stylesheet, so it now becomes important that the desired stylesheet is selected before creating any new rule.
2. There is no need to link the "gallery.css" file to any page on the site that does not need the rules found in this file.
3. If you prefer working with a single stylesheet, you could open the external stylesheet file and copy its contents, then paste them into the internal stylesheet in the source of the HTML file - assuming that you haven't exported it already!

Go to Top Page published: 23 April 2012