How to Use CSS KompoZer

Kompozer makes it easier to design websites.

Kompozer is a "What You See is What You Get" or WYSIWYG Web page authoring tool that runs on Windows, Mac OS X and Linux operating systems. Kompozer allows users to create websites without writing any code. Kompozer is an updated version of Nvu, which was in turn an enhanced version of Netscape's HTML editor called Composer. Kompozer has a CSS (Cascading Style Sheet) wizard tool that makes styling website content relatively easy. In addition, the CSS wizard can export your CSS code to an external file.

Things You'll Need

• Computer with a Web browser
• Kompozer version 0.8b3 or later

Instructions

1. Launch the Kompozer application. Click the "Design" tab in the lower left corner of the work area. Type "This is text in a paragraph" in the work area. Press the "Enter" or "Return" key twice. Type "This is text in a <div> ."

2. Click the "Save" icon. In the "Page Title" input box, type "Kompozer CSS Test." Click OK. In the "Save Page As" dialog box, enter "test.html" as the file name. Click the "Save" icon.

3. Double-click the first line of text to select it. Click the down arrow on the drop-down list box labeled "Body Text" and select "paragraph." Go back to the work area. Double-click the second line of text to select it. Click the down arrow on the drop-down list box labeled "Body Text" and "Generic container (div)."

4. Double-click the second line of text outlined in red. In the Advanced Property editor, click the down arrow on the Attribute drop-down list box. Select "ID." Click in the "Value:" input box and type "line2" as the ID value.

5. Click on the "CSS" icon in the line of icons beneath the menu. Click the down-arrow on drop-down list above the "Create Style rule" button and beneath the "custom style rule" radio button. Select "p (Paragraph)."

6. Click the "Create Style rule" button. Click on the gray "Text" tab. Click the down arrow on the drop-down list box labeled "Font weight" and select "Bold." Click the "OK" button.

7. Click on the "CSS" icon in the line of icons beneath the menu again. Click the palette icon above and to the left of the text "Sheets and rules." Select the radio button that reads "style applied to an element with a specified ID attribute." Click the down-arrow on the drop-down list above the "Create Style rule" button and beneath the "custom style rule" radio button. Select "#line2."

8. Click the "Create Style rule" button. Click on the gray "Background" tab. Type "blue" in the input box labeled "Color:". Click on gray "Text" tab. Type "white" in the input box labeled "Color:". Click the "OK" button.

9. Click on the "CSS" icon in the line of icons beneath the menu once again. Click on the "Save" icon. Click on the File menu and select "Quit" to close the Kompozer.

10. Launch your Web browser. Click on the "File" menu item and select "Open File." Locate the file "test.html" just created, select it with the mouse then click on "Open."

Tips & Warnings

• While Kompozer allows you to export your CSS code, you cannot directly edit that code in Kompozer. Instead, you must use a plain-text editor to make any changes. You can edit internal CSS code, however, by using the wizard or by entering the source code mode.

• At times, Kompozer will make valid, but sometimes unnecessary changes to your source code. This is a bug that has existed for years -- even in Netscape's Composer. This bug may never be fixed. While the changes Kompozer makes are syntactically correct, they may affect the way your code displays. Always examine and test your code thoroughly to be certain everything works as it should.

References

• "Kompozer.net" : Easy Web Authoring!
• "Charlescooke.me.uk": User Guide for KompoZer and Nvu
• "W3schools.com": CSS Examples

Resources

• "Thesitewizard.com": How to Design and Publish Your Website with KompoZer