How To

How to Work With CSS in Nvu

Nvu is an Open Source WYWIWYG HTML Editor
Nvu is an Open Source WYWIWYG HTML Editor
Contributor
By Virginia DeBolt
eHow Contributing Writer
(6 Ratings)

Nvu is an open source WYSIWYG HTML editor that is used to create web pages. It is available for free from nvudev.com and works on Windows, Mac and Linux. This article will show you how to write CSS rules with Nvu.

Difficulty: Moderately Challenging
Instructions

Things You'll Need:

  • Nvu software
  1. Step 1

    If you don't already have Nvu, you can download and install a version appropriate for your computer at nvudev.com (see link below). When you have the software installed, create a site and at least one HTML page before beginning these steps.

  2. Step 2
    To begin, click the Style elt button or the Link elt button.
    To begin, click the Style elt button or the Link elt button.

    In the Tools menu, select CSS Editor. You can create an internal or external style sheet. Click the Style elt button at the lower left.

  3. Step 3
    Click the Create Stylesheet button.
    Click the Create Stylesheet button.

    A new stylesheet dialog opens. Name the stylesheet and Click Create Stylesheet.

  4. Step 4
    An external stylesheet is easy to create.
    An external stylesheet is easy to create.

    It creates an internal stylesheet by default. You can export to an external stylesheet using the Export Stylesheet and Switch to the Exported Version button.

  5. Step 5
    Start with the expert option deselected.
    Start with the expert option deselected.

    Deselect the Expert button and Rule becomes active. Press it to create a new style rule.

  6. Step 6
    Type your selector in this field to style an HTML element.
    Type your selector in this field to style an HTML element.

    You can create a named style or enter a selector such as "body" in the blank field. Click Create Style rule to begin writing rules.

  7. Step 7
    Background options
    Background options

    Using the tabs across the top, you can style background. If you are familiar with setting style rules in Dreamweaver, you will notice some similarities between Nvu's styling options and those in Dreamweaver.

  8. Step 8
    Text options
    Text options

    You can style text elements.

  9. Step 9
    Box options
    Box options

    You can style box elements.

  10. Step 10
    Border options
    Border options

    You can style border elements.

  11. Step 11
    A page preview
    A page preview

    Your choices are reflected immediately in the document window. Keep in mind that these background, box, border and other options can be applied to any HTML element on a page using the various CSS selectors.

Tips & Warnings
  • Check eHow for my other articles on Nvu. This is one of a series.

Post a Comment

Post a Comment

Have you done this? Click here to let us know.

I Did This

Related Ads

Internet
Virginia DeBolt,

Meet Virginia DeBolt eHow’s Internet Expert.

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.   en-US

Demand Media
eHow_eHow Technology and Electronics