Show/Hide

Help Center

Using Style Sheets for Your Web Pages

Using Cascade Style Sheets

Cascade Style Sheets(CSS) can be used to style an HTML document in three ways:

1. Using inline styles.
2. Using internal style sheet.
3. Using external style sheets.

KompoZer has an inbuilt style sheet editor called CaScadeS. CaScadeS can be used to produce either an internal style sheet or an external one. As opposed to inline styles, internal or external style sheets help to keep the content and style information separate.

To style the html document you are editing, CaScadeS can be started by clicking on Tools and choosing CSS Editor. CaScadeS allows two modes of style sheet editing:

1. Beginner Mode: This mode allows to create rules associated to class selectors or type element selectors.
2. Expert Mode: This mode allows to create rules without any restriction.

In case there is no style sheet, a new style sheet will be automatically created.

[ Return to beginning of section ]

Creating Style Sheets with KompoZer

Using CaScadeS, one can create either internal style sheets or external style sheets. To create an internal style sheet:

1. Click on the Style elt. button
   • (Optional) Fill in Media list and Title information for the style sheet.
2. Click on Create Stylesheet.

To create an external stylesheet:

1. Click on the Link elt. button
2. Fill in the URL of the stylesheet in the right pane. A new file will be created on the local filesystem, if it doesnot already exist.
   • (Optional) Fill in Media list and Title informationfor the style sheet.
3. Check the "check to create alternate stylesheet" if this is an alternate one.

Tip: Always save the html document before attaching local style sheet. Also, save document immediately before closing the CSS editor.

Tip: Use Refresh button in the left pane, if stylesheet is not immediately downloaded.

[ Return to beginning of section ]

Creating Rules for Stylesheets

After creating one or more stylesheets for the html document, rules can be created for each stylesheet individually. To use a particular stylesheet for creating or modifying rules, highlight the stylesheet in the left pane by clicking with left mouse button. The right pane will show the detials of the stylesheet in the General Tab. To create new rules:

1. Click on the Rule button in the left pane.
2. Right pane shows options as to what kind of rule to create. Choose one of:
   • named style (enter class name below)
   • style applied to all elements of type (enter type below)
   • style applied to all elements matching the following selector
3. Fill in the name of the rule.
4. Click on Create Style Rule button.

Rules can be defined using the styling tabs (Text, Background, Border, Box and Aural) in the right pane. To see all the definitions of a style rule, highlight the rule in the left pane and click on "General" tab in the right pane. The "General" tab shows all definitions currently applied to the rule.

[ Return to beginning of section ]

[Home] [Next] [Previous]

Copyright © 2004-2009 Contributors to the Nvu, KompoZer Help Documentation Project.