Go to TopExternal (Linked) Stylesheets

Before attempting the step-by-step tutorial on this page you should have a basic appreciation of the various ways in which you can style content. A brief introduction to the topic is provided on the Content and Style page in the Essential Theory section.

This tutorial demonstrates how to create an "External Stylesheet", called a "Linked Stylesheet" by KompoZer. With this technique styling instructions for a page are defined in a separate file, linked by a single line of code in the HTML file that forms the page.

This approach keeps the individual page files small, helping download speeds and has the huge benefit that styling changes made to any page will be reflected in every other page on the site, as any page will always refer to the current version of the stylesheet as they are loaded.

Now, let's start that demonstration...

Go to TopCreate a New Page

1. Open KompoZer.

2. In the new empty document type the text that appears between the two lines below.

NOTE: If you are tempted to copy and paste, then be aware that the easiest way to select a block of text, especially longer ones that would involve scrolling the page, is to point and click just before the "A Heading" and shift-click just after the "01 July 2007". This should leave the paragraph format drop down list showing "Body Text" regardless of the position of the cursor within the text. If it isn't select all the copied text and re-set the format to "Body Text".


A Heading
Here is a first paragraph. Here is a first paragraph. Here is a first paragraph. Here is a first paragraph. Here is a first paragraph.
Here is another paragraph. Here is another paragraph. Here is another paragraph. Here is another paragraph. Here is another paragraph.
Here is a third paragraph. Here is a third paragraph. Here is a third paragraph. Here is a third paragraph. Here is a third paragraph. Here is a third paragraph.
Page Updated 01 July 2007
The KompoZer window after entering the basic text
The KompoZer window after entering the basic text

3. Save this page. When prompted for a page title give it the name "test1" and place it in some convenient location.

Go to TopAdd Tags to the Content

BACKGROUND: All text needs to be tagged, to indicate whether it is a main or secondary heading, ordinary paragraph. list item, table, etc. This has two functions. It allows search engines to better index a site and it enables the browser to apply some crude styling of its own. The better tagged the text is the more control can be exerted over the styling we apply to improve on the browser's defaults.

1. Place the cursor within the "A Heading" line.

2. On the Formatting Toolbar, drop down the Paragraph formatting list and change the entry from "Body Text" to "Heading 1".

3. Place the cursor in each of the remaining four paragraphs, in turn, changing each of their formats from "Body Text" to "Paragraph". The heading and four paragraphs will now display in their default formats, with the heading in larger type and spaces between paragraphs.

4. Save the page.

Go to TopCreate an External Stylesheet

1. Click the CSS (Artist's Palette) toolbar button to open the Stylesheet Editor.

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.

The CSS Editor - New Rule Pane
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, enter "teststyle.css" as a filename. Don't forget the ".css" in the filename. Some browsers won't read the file if that extension is missing!

5. Click the "Save" button. (This should place it in the same folder as the "test1.html" file.)

The Internal stylesheet has been converted to the external "teststyle.css" stylesheet and the left pane reflects the change.

Go to TopCreate Styling Rules

For the Heading

1. Click on "teststyle.css" on the left pane of the dialogue to ensure the file is selected.

WARNING: If you don't ensure that the css file is selected at any point when you create a new rule, KompoZer will auto-generate a new Internal stylesheet and add the rule to that instead.

CSS Editor: New Rule
CSS Editor: New Rule

2. Click on the "Rule" (Artist's Palette) button itself - not the associated drop-down list. The right pane changes to the New Rule page.

3. Check that the option "style applied to all elements of type" is selected and from the drop down the list under the options, pick "h1 (Heading 1)" and click the "Create Style rule" button.

The contents of the drop down list vary depending to which of the options have been selected.

On the left you'll see a red disk,  unsaved file, indicator and the selector created. The right pane changes to show "Style rule" under the General tab. If you knew the syntax you could type in the required text on the right hand pane. However, we'll do it using the dialogues under the tabs.

TIP: If the top of the main window remains visible during the remaining instructions you will see the heading take on the styling as each item is selected.

CSS Editor: Text Tab
CSS Editor: Text Tab

4. Click the "Text" tab and make these adjustments:

4a. Under Font Family, select the "Predefined" radio button, leaving the default "Arial, Helvetica, Sans-serif".

4b. To the extreme right of the "Color" field, click the button and select a colour from the dialogue.

4c. Drop down the "Font Size" list and select "0em", then use the spin wheel to increase the value to "3em".

4d. Drop down the "Font weight" list and select "Bold".

5. Click the "Background" tab, then click the button to the extreme right of the Color field and pick a light colour.

6. Click the Borders tab and make the following adjustments:

6a. When open, make sure "All four sides the same" is checked.

6b. On the "Top" line, set "Style" to "Solid", "Width" to "1px" and "Color" to a dark colour to match the heading border.

For the Paragraphs

1. Click the "Rule" (Artist's Palette) button again.

2. Checking that the option "style applied to all elements of type" is selected, drop down the list at the bottom of the pane, pick "p (Paragraph)" and click the "Create Style rule" button.

3. Click the "Text" tab and set the following:

Font-family: Times New Roman,Times,serif;
Font-style: italic;
Color: Black;
Font-size: 1em;

Go to TopCreate Class Rules

For First Paragraphs

NOTE: Classes are used to create "special case" styling. In this example we create styling for a paragraph that will be applied to the first paragraph after a heading.

CSS Editor: New Rule
CSS Editor: New Rule

1. Once more, click the "Rule" button, but this time select the "Custom Style rule" radio button on the right pane.

2. Enter "p.first" (without the quotes) in the selector field and click the "Create Style rule" button.

3. Click the "Text" tab and set the following:

Font-family: Arial,Helvetica,sans-serif;
Font-weight: bold;

For Date Paragraphs

NOTE: Another special type of paragraph, this time intended for the date the page was updated.

1. Finally, click the "Rule" button, and select the "Custom Style rule" radio button on the right pane.

2. Enter "p.date" (without the quotes) in the selector field and click the "Create Style rule" button.

3. Click the "Text" tab set the following:

Text-align: right;
Font-size: 0.75em;

4. Click the "Borders" tab and clear the "All four sides use the same border style" check box, then set the top border to be (choose a colour to match your heading):

Style: solid
Width:1px
Color: Red

5. When done click "OK"

NOTES:
1. All characteristics will cascade from the parent rule, so we only redefine the bits that need changing for these two special classes of paragraph.
2. You might want to use similar styling for copyright notices or credits under photographs - in which case give your style a meaningful name. Class names should always be functional, rather than descriptive, i.e. "credit" NOT "smallrightaligned", in case you decide to change the appearance of credit text at a later date.

Go to TopApply Class Styling

NOTE: By default there is a "Class" drop down list on the Formatting toolbar. The images in this tutorial show a toolbar that has been customised as suggested on the Installation Page. The reason the "Class" drop-down list has been removed is that it is slow to react to changes and does not allow you to remove wrongly applied classes, it is, therefore, generally better to use the Status Line method to apply and remove class rules as set out below.

1. Place the cursor in the first paragraph then, on the Status Line, right-click on the <p> tag.

2. On the menu that appears select "Classes" then "first".

3. Place the cursor in the final paragraph then, on the Status line, right-click on the <p> tag.

4. On the menu that appears, select "Classes" then "date".

These paragraphs will retain the styling for paragraphs, except where the class definitions vary and the result should look like as below.

NOTE: As you apply a class the Status line tag reflects this fact.

Completed test1.html page
Completed test1.html page

1. Open a second page in KompoZer, name it "test2" and save it as "test2.html".

CSS Editor: Rule Button Dropdown Menu
CSS Editor: Rule Button Dropdown Menu

2. Click the CSS (Artist's Palette) toolbar button to open the CSS Stylesheets dialogue.

3. Once open, click on the drop down list beside the "Rule" button (Artist's Palette) and select "Linked stylesheet.". This changes the right hand pane to show the "New Linked Stylesheet" pane.

CSS Editor: Link Stylesheet Pane
CSS Editor: Link Stylesheet Pane

4. Click the "Choose File" button, under the URL field to open the "Select a CSS file" dialogue. Select the "teststyle.css" file and click the "Open" button. Complete the process by clicking the "Create Stylesheet" button

5. The redundant "internal stylesheet" can be removed. In the left pane, select it and click the Delete (Red Cross) button.

Go to TopAdd Content and Tag it

1. Type in a few lines of text, hitting the Carriage Return/Enter key to complete each line. (Alternatively, paste in the same text that was used on the first page.)

2. Use the same techniques to format the text on this new page as was described in the earlier "Add Tags to the Content" section.

NOTE: As you apply heading and paragraph tags, the text should instantly adopt the formatting specified in the external stylesheet. As on the "test 1" page, the two classes can also be added to any paragraph blocks.

Go to TopEdit a Style - See it Cascade through the Site

1. Click the CSS (Artist's Palette) toolbar button to open the Stylesheet Editor.

2. Click on [+] symbol beside "teststyle.css" on the left pane of the dialogue, to show the previously defined styling rules.

3. Click on the "h1" item to select it.

4. On the right pane, click on the "Background" tab, then click the button to the extreme right of the Color field, pick an alernative light colour and confirm the choice by clicking the "OK" button.

5. Click the "OK" button to close the "CSS Stylesheets" dialogue and write the revised stylesheet to disk.

6. Select the "test 1" tab in the KompoZer window.

7. Open the "File" menu and choose "Revert". This will reload the "test 1" page and thereby, re-read the CSS file, forcing it to adopt the revised "Heading 1" style.

Why would you ever want to drag over individual blocks of text again and apply styling manually, one item at a time across a site with many pages! Such an approach is madness!

Go to Top Page updated: 29 September 2014