Go to TopExternal (Linked) Stylesheets

KompoZer's Options dialogue will allow you to set whether the HTML produced uses HTML elements and attributes or CSS (Cascading Style Sheet) styles when building a page.

The first option represents an early form of HTML which, these days, is deprecated by the W3C (World Wide Web Consortium, the governing body for web standards).

If the default CSS styles is selected then these are produced "in-line", i.e. each element is individually styled. Those who normally style a web page by selecting text and clicking on the toolbar buttons will produce pages with this kind of code.  In most instances this approach is very bad practice because, should you ever decide to change the appearance of your site, then you have to go through every part of your site and redo all the changes manually.

Better than this is to use an "Internal Style Sheet".  This is more efficient as it avoids repetition of styling instructions that both bulk out the code in your pages and make them slow to load. With this approach all the styling instructions are moved to a single block of code that is referred to as each element on the page is rendered by the web browser. You can just change the styling instruction in just one place and all the elements of the page that use these instructions change at once.

More efficient still is the "External Stylesheet", called a "Linked Stylesheet" by KompoZer.  The block of styling instructions for a page is moved to a separate file, linked by a line of code in the HTML file. Here the styling instructions are accessed not just for a single page, but the entire site.  It keeps the individual page files small, so helping download speeds, and also means that only one file needs to be amended to make major changes to the appearance of the entire site.

The best approach, therefore, is to use an external stylesheet.  Below is a short tutorial that outlines the general process.

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

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

Go to TopApply some Basic Formatting

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 (curved arrow) button on the toolbar.  This changes the right pane to that shown below.

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 and 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 CSS Rules for Styling 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

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 an "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

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.

Go to TopCreate CSS Rules for styling 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 a Special "Class" 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

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;

Go to TopCreate a Special "Class" 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:

Style: solid
Width:1px
Color: Red (or one to match your heading!)

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 to Tags

1.  Place the cursor in the first paragraph. On the Formatting Toolbar. The Paragraph formatting list will show "Paragraph".

2.  Immediately to the right of the Paragraph formatting list, drop down the, currently blank, Class list and select "first".

3.  Place the cursor in the final paragraph.

4.  Drop down the Class list and select "date".

These paragraphs will retain the styling for paragraphs, except where the class definitions vary and the result should look like this:

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

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

 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 Formatting

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 formatting techniques on this new page as specified in the earlier section "Apply some Basic Formatting".

NOTE: As you apply the "Heading 1" and "Paragraph" formats, 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: 16 February 2014