CSS Editor

This chapter describes the facilities that the Novell exteNd Director development environment provides to work with CSS files. It contains the following topics:

About CSS

CSS (Cascading Style Sheets) is a mechanism for applying styles (such as fonts, colors, and spacing) to Web documents (including HTML, XHTML, and XML files). You define a style sheet to specify the styling you want for a document. That style sheet can either be embedded in the document, or stored externally in a separate CSS file and attached to the document. The advantage of CSS files is that they enable you to reuse a style sheet with multiple documents.

For more information The complete CSS standard can be found at www.w3.org/Style/CSS.

Inside a style sheet A style sheet consists of rules, which identify specific parts of a document and the styling to apply to them. Here's a typical rule:

  .glossaryitem {font-weight: bold; color: slategray;}

In this rule:

.glossaryitem is a selector that specifies a class of entities in the document; this rule will apply only to those entities. CSS provides several different kinds of selectors to give you flexibility when targeting your styling.
font-weight is a style property to set. CSS provides many different properties to give you control over each aspect of style.
bold is the value to set for the property.

Multiple rules in a style sheet can apply to a particular entity in a document. When this happens, the styling defined by those rules cascades to affect multiple properties of the entity.

Sample style sheet The following style sheet defines several different rules; these rules use various kinds of selectors and properties to specify what to style and how.

  body {margin-top: 0pt;}
  
  h1 
    {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 0pt;
    margin-bottom: 9pt;
    padding-top: 0pt;
    padding-bottom: 0pt;
    }
  
  p, ol, ul, dl, dt, dd, table, td, th, select, input 
    {
    font-size: 8pt;
    font-family: verdana, arial, helvetica, sans-serif;
    }  
  
  p.tablepara 
    {
    padding-top: 0pt;
    padding-bottom: 0pt;
    margin-top: 1pt;
    margin-bottom: 1pt;
    }
  
  .glossaryitem {font-weight: bold; color: slategray;}
  
  #title 
    {
    position: absolute;
    top: 25px;
    left: 4px;
    width: 208px;
    visibility: visible
    }

CSS in the development environment

The exteNd Director development environment provides the following tools for working with CSS:

CSS File Wizard for creating a CSS (style sheet) file
CSS Editor for examining and editing a CSS file
CSS Style Manager, a dialog that you can access from other exteNd Director tools when CSS styling is called for

Creating and opening CSS files

You can create new CSS files or work with existing ones.

Procedure To create a new CSS file:

Select File>New>File.
On the Portlet tab, select CSS file.
To create a blank CSS file, deselect Use Wizard and click OK. An empty CSS file is created and displayed in the CSS Editor.

To use the CSS File Wizard, select Use Wizard and click OK. The CSS File Wizard displays. Go through the wizard as follows.
Specify the name of the CSS file.
Select which wizard pages you want to see to specify style sheet features:
- Template
- Vocabulary
- Basic appearance
- Button appearance
- Link appearance
- Headings appearance
This enables you to focus on just those style sheet features you want to specify right now. (You can always specify others later in the CSS Editor.)
Click Next.
Specify the location of the CSS file and click Next.
The wizard now displays the pages you selected, in order. Complete each page and click Next.
When you complete the last page, click Finish.

The CSS Editor displays with your new CSS file open.

Procedure To open a CSS file:

Select File>Open.
In the Open dialog, select the CSS file and click Open.

The file extension must be .CSS. The selected file opens in the CSS Editor and the CSS Editor menu appears on the menu bar.

Using the CSS Editor

The CSS Editor provides two views for working with a CSS file:

The CSS View tab enables you to develop and examine your style sheet in a graphical way. You can:
- Manipulate the list of rules for the style sheet
- Specify the selectors for any rule
- Set the properties for any rule
The Source View tab displays a source editor that you can use to examine and edit your CSS code directly. The Source View offers the same standard text editing features that are available in the XML Editor's Source View (for details, see XML Editors).

Here's an example of using the CSS Editor's CSS View to develop a simple style sheet:

CSSeditor

Using the CSS Style Manager dialog

The CSS Style Manager is a dialog you can access from other exteNd Director tools when CSS styling is called for (such as while you're editing an XML file or XHTML file). This dialog enables you to:

Attach a new or existing style sheet
Detach a style sheet
Edit a style sheet (either in the dialog or by opening the CSS Editor)

CSSstylemanager