The editor window

Figure 3-1. Several files open in the editor window

The editor window is the cssed documents container. Any document open in cssed, will own an editor window where you can see, and change document contents.

Each open document is displayed in a tab at the top of cssed editor window. If there are several open documents, and there is no more room for tabs, the new tab will be hidden and two small buttons facing right and left, will appear on the right side of the documents tabs. With those two buttons you can browse through all open documents.


If you get gtk 2.4.9 and above installed, you will notice that the small arrows are no more grouped together. To retrieve a more efficient usage in all applications, you may want to customize gtk by creating or modifying the .gtkrc file in your home directory. Here is how to do this on Mac (the name of the rc file may vary on other system, but the lines to insert are the same):

Getting grouped arrows

  1. Open the .gtkrc-2.0 file in a terminal window with pico:

    pico .gtkrc-2.0

  2. Put those lines in it:

    style "default"


    GtkNotebook::has_secondary_forward_stepper = 1

    GtkNotebook::has_secondary_backward_stepper = 1


    class "GtkWidget" style "default"


A quicker access is provided by the contextual pop-up menu, which opens when you right-click on a tab. It displays all the open tabs in cssed, and you can choose any of them to make it the active document.

Figure 3-2. The editor window contextual menu

The path to the current document appears in the cssed window title bar, providing that an existing document has been opened or a new document has been saved.

Setting document preferences

Apart from the global settings (discussed in the Section called Configuring with the dialog in Chapter 6), each document open in cssed can have its own preferences and behave in a different way. The Document menu shows and lets you set the current document settings. This menu changes each time you switch to another document to reflect its current settings.

Here are the settings you can set:

View line numbers

On activation, the line numbers are shown in the right margin of cssed.

View line endings

On activation, the end of line characters are made visible. It is useful to know what kind of document you are editing Unix (LF), Mac (CR) or DOS/Windows (CR and LF). [1]

View white spaces

On activation, the white space characters are shown in a graphical way.

View lines wrapped

On activation, when the lines are larger than the editor window width, they are wrapped at the right margin and continue at the left margin. In this mode the horizontal scroll bar is never shown.

Enable autocompletion

On enabling, auto completion is enabled for the current document. It allows you to choose quickly properties and values from a popup menu. More on this thema in the Section called Auto completion.

Enable folding

On enabling, a - appears in the left margin and all properties are unfold. Clicking on it switches the - to a +, and fold the given property; you unfold it again by clicking on the +. You can also fold/unfold all properties from the item folding within the Document menu. When you disable folding again, the properties are automatically unfold.

Figure 3-3. Folding all on the current document

Set EOL mode

This entry converts the end of line characters between the most commonly used types. You can convert a Windows document in a Unix one for example.


This entry allows you to change the syntax highlighting chosen by cssed (based on the file extension) once the file is open.

The syntax highlighting for CSS files is based on what is set in preferences (see the Section called Configuring with the dialog in Chapter 6). For other files it is hard-coded at the time being, but will be configurable in a future release).

Here you can see a shell script highlighted:

Figure 3-4. Highlighting a shell script

Force encoding

The default encoding for new document is UTF-8. You can force the encoding either for a new document or for an already existing document. See the Section called Forcing the encoding for an in-depth discussion.

Character set

This menu is aimed at people who need to deal with Asian languages. Some explanation about its functionalities will be found in the Section called Setting the character set.

Change Font

This entry lets you change the font for the current document.


Remember that when you change the document settings, they are only changed for the current document.

You can see below the document settings in action.

Figure 3-5. Document settings in action


Note line numbers, folding enabled, line endings set to Unix though made on a Mac, lines wrapping, white spaces (... for spaces, arrows for tabulations), and highlighting.

Auto completion

Auto completion is one of the most used features in cssed. It lets you start typing a property name and see all possible completions. Once you have selected a property, you can apply it one of its values from a pop menu.

To use auto completion, you should first activate it in the Document menu (See the Section called Setting document preferences).

Usage of autocompletion

  1. Type the declaration name and the opening curly brace.

    As soon as you will type the opening brace, you will be presented with the list of all possible CSS properties.

  2. Use one of the following techniques to search for the desired property:

    1. Type the first letters of the property, if you know it. The list will scroll up or down automatically to the properties whose names begin with the given letters.

    2. Use the scrollbar to navigate the list.

  3. Select the desired property by:

    1. either double-clicking on it

    2. or clicking on it and press return

    The property will be written in the document.

  4. Once the property is written in the document, type the sentence separator character :, a pop menu with the possible values for this property will be shown. You can then select the desired value the same way you did it for the property with the auto completion list.


    A value embedded in parentheses leads to a dialog. Just click on it to access the dialog, fill it in, and click on OK.

  5. Type a ; to complete the process.

  6. When you have added all the properties you want to the declaration, hit the Esc key to hide the autocompletion list and use the combination keys Ctrl-l to delete the new line added by cssed. See the explanation in the Section called Auto completion annoyances.


If you choose a value by error, just delete it as well as the sentence separator character :, and enter the sentence separator character : again to trigger the value's pop menu.

To quickly switch auto completion on and off, you can use the accelerator key Alt-D-a. With this accelerator key you can use auto completion for a single item, and then toggle it again to off.

Some users do not like the auto completion cycle. To let them use just the auto completion list, the accelerator keys Alt-T-a will show this list even if auto completion is disabled for the current document. No trigger key will be further used to show the auto completion list, or auto completion menu if auto completion is disabled in the current document, even if you start the auto completion cycle showing the list with Alt-T-a.


Mac OS X users: remember you cannot use accelerator keys.

Auto completion annoyances

The auto completion is not finished yet, and there are some situations where it can be annoying to the user. The auto completion list is shown each time the opening brace is typed. This way when you type a media at-rule - for example - the auto completion list is shown even when a property into this at-rule is bad CSS.


Use the Esc key to hide the auto completion list at any time.

The auto completion pop menu works by reading the word from the start of the line to the sentence separator, and looking for a matching string in the CSS tree view (View: the Section called The tree view). This way it only will work with CSS formated with a sentence per line and not when you put various sentences in the same line, even when it is valid CSS.

To get auto completion to work with those requirements, cssed always adds an end of line character when you type the sentence end character ;.

This way - when using auto completion - you always must delete the last line added by cssed.


To do it quickly use the accelerator keys Ctrl-l.

You can also use Alt-; instead of ; to avoid to continue the auto completion cycle.

Selecting blocks of text

In cssed, there are multiple ways of selecting blocks of text.

Kind of blocks

Any chunk of text

Push the left mouse button, select the block with the mouse, and release the button.

A whole line

Move the mouse pointer to the beginning of the line (the cursor changes to a pointer) and click.


Click on a line number, provided that you have activated the line numbers (See the Section called Setting document preferences).

Multiple lines

Put the cursor at the start of the text to be selected, push the Shift key and click on the line number you want to be the end of block.

The whole text

Use Ctrl-A.


Push Ctrl and click on any number in the margin, provided that you have activated the line numbers (See the Section called Setting document preferences).

Indenting blocks of text

In cssed the behavior of the tab key when indenting a selected text block differs if there is one line of text selected, or if the block of text selected contains multiple lines:


If you want to indent a block of code, be sure it contains at least an end of line character with one of the above tips.

Forcing the encoding


You may want to check the encoding of the file foo with:

file foo.

Take into acount that file always reports ASCII encoding when there is no accented character in the file.


Do not mix encodings in a given file, you will end up with bad rendering.

Setting the character set

This is only needed for Asian languages. The supported character sets are the following:

ANSI and Western Europe are recognized when typing characters.

To use input methods in cssed, you will need to proceed as follows:

Using input method in cssed

  1. Set the font to the Asian font of your choice

  2. Set the encoding to DBCS or UTF-8

  3. Set the character set to GB2312, Hangul, or Shift JIS



The acronyms used to name end of lines are:

  • CR - Carriage Return

  • LF - Line Feed

  • CR/LF - Uses both characters Carriage Return and Line Feed