CSS in NVU

Using the CSS editor in NVU

Introduction to CSS

CSS is short for Cascading Style Sheets, which sounds a lot more complicated than it is. It just means that multiple style sheets can be used at the same time. A style sheet is just a list of formatting options for various items, separate from the content of your html document. See the wikipedia article on CSS for more info, or have a look at the CSS tutorial at w3schools.com.

The advantage of using CSS is that if you decide you want to change certain text, you can do it in just one place, rather than having to repeatedly highlight text and select the new format. Of course, there are a few "tricks" to making this work, but they're pretty easy.

There are a couple of different types of style sheets. You can store your style information within your same html file, or you can store it in an external style. (There are also inline styles, but we won't talk about those here.) External style sheets are especially useful when you want your style information to apply to multiple files. (For example, on scripts.batbforever.com, most of the html pages reference the same .css file.) If you're just making one page that really has no formatting in common with anything else, then an internal style sheet is fine. (And your html file could theoretically use both - maybe you want your html file to look mostly the way your external .css file specifies, but with a few exceptions specified in your internal style sheet.)

How CSS works

The way CSS works is you tell it how you want certain elements to be formatted. But in order for CSS to know which elements are which, you have to label them. The title of my document, Using the CSS editor in NVU, is set to Heading 2 (or h2). My paragraph headings are set to Heading 3 (h3). HTML supports Headings 1 - 6, and there are default sizes and styles for each of them. I usually pick one that's already close to what I'm looking for. If you don't choose one specifically, your paragraph text will be classified as Body Text, or Paragraph, or if it's in a table it will be classified as Table. Select your text style from the nvu dropdown box labeled Choose a paragraph format. (It's right below the New and Open buttons.)

So in our CSS files, we could specify, as I have for this document, that heading 2 should be centered. And we could specify, as I have, that all text be set to the font Verdana. We could specify, as I have, that h2 should be italic.

We can also specify, for example, link colors. Let's set the visited link color in this file to red.

Getting started

First, make sure your html file has been saved. (The CSS editor can get confused if your file hasn't been saved yet.)

If you want, you can label your headers before you start. Or you can label them after you define their styles. Either way, they'll work.

Decide whether you need an internal or an external style sheet. External style sheets are more versatile - you can easily use it with another html document, but you also have to remember to upload your .css file in addition to your .html file. (Pictures have to be uploaded separately anyway, so it's not a huge deal.) An external .css also gives you the option of changing just the formatting and not the html itself. An internal .css will have its data stored in your html file itself (at the top, in the header section).

Next we'll create a stylesheet - internal or external, your choice and then create some rules. To start the CSS editor in NVU, go to the Tools menu and choose CSS editor. (Creating styles and rules is fussy in nvu, so follow the steps carefully.)

Creating an internal style sheet

Click the Style elt. button at the lower left.
Click the Create stylesheet button that appears in the right pane.

Creating an external style sheet

Click the Link elt. button on the lower left.
It needs a filename. You can type one in, click Choose File and search for an existing one, or enter a url.
Click Create stylesheet.

Create rules

Still in the nvu CSS editor, click on the name of your stylesheet at the top of the left pane. (The filename will appear in italics and will have a little + next to it.)
Click Rule at the bottom left. Now the fun and interesting part starts. :-)
Click the second of the three radio buttons that appear.
In the text box under the radio buttons, enter the element(s) to which your rule applies.
Click Create Style rule.
Choose among the tabs in the right pane to apply settings to your selected element(s).

Examples

To set all my text to Verdana, I created a rule that applied to body,p,h1,h2,h3,h4,h5,h6,table and then under the Text tab, in the Use custom font family box, I entered Verdana, Arial, Helvetica, sans-serif. (Entering multiple font names is desirable in case the user doesn't have the first one you specify, or the second one, etc. Verdana is a font that Microsoft created expressly for screen viewing. It and its serif counterpart, Georgia, do look great on screen.)

To have my page title centered, I created a rule that applied only to h2 and then under the Text tab, I set the Alignment to Center.

To italicize paragraph headings, I created a rule that applied to h3 and then under the Text tab, I set the Font style to Italic.

To set the background color, I created a rule for body and then under the Background tab, I set the color using the color chooser.

To make visited links red, I created a rule (choosing the first radio button, not the second) with class vlink and then under the Text tab, I set the color to red using the color chooser. This is where that w3schools tutorial comes in useful. It will let you know what classes there are to ask for.

In case it's helpful or instructive, this is what the .css file for scripts.batbforever.com looks like:

body,p, table, th, td, h1, h2
{
font-family: verdana,helvetica, arial, sans-serif;
}
p, table, th, td, h1, h2
{
font-weight: normal
}
h1
{
font-size: xx-large
}
h2
{
font-size: large;
}
p
{
font-size: medium;
}
body
{
background-color: rgb(255, 204, 204);
font-size: medium;
}
a:link {COLOR: #000099;}
a:visited {COLOR: #990099;}
a:active {COLOR: #000099;}
a:hover {COLOR: #000099;}

In summary

In my opinion, the CSS editor in nvu could be a whole lot better than it is. The creation of both style sheets and rules is non-intuitive and fussy and the nvu help on the topic is virtually non-existent. (I googled to find out what I know so far.) And it requires you to know some html so you know what elements or classes to ask for - not that there's anything wrong with learning html, but wouldn't it be helpful to be able to look at a nice list of some options to pick from? Sigh. Maybe in the next version. (And one last annoyance - it creates the .css text file without line breaks, so it doesn't open nicely in notepad.)

It's *almost* easier to just set up your css files using notepad (as I did the batbforever one), but if you do that your html file won't update immediately with .css changes like it does when you use the nvu css editor.

All of this being said, I *highly* recommend using CSS. My experiences with nvu have become much less frustrating since I started using it.