Support for CSS

Cascading Style Sheets(CSS) are the recommended way to format text. You can also use them to define the appearance and behaviour of other page elements, such as background images, sounds, the appearance of buttons and form fields, and much more.

Spider supports the creation of pages using CSS, which consists of the following functions and tools:

Many tag editing tools also have options to create CSS styles and use classes.

Create a simple CSS selector in the current document

Create a new, empty selector

To create a simple CSS sheet, activate the CSS Inspector tab (standard shortcut Ctrl+3). Then use the New Selector command . This will create a style section in the current document and the skeleton of an empty selector without a name.

Now you need to give a name to the selector - it can be, for example, the name of the tag - DIV. Type it before the curly brace {. In this way, we will make sure that all div tags in the document use this style.

How do I create and edit style properties?

The next most important step is to create a style. Place the cursor between { and } and go to the CSS inspector. In the upper part of the tab, the name of the DIV selector will appear in the list on the right.

Previously, you were just setting up a document to create a style - at this point, you start to really style for the selected tag. A style is created by assigning appropriate values to the style properties that are listed below the menu. These properties are grouped into categories by default, but you can change this (more in CSS Inspector help).

To make it easier to enter values for CSS properties, use the dedicated tools for selecting fonts, colors etc. You can open them using the buttons to the right of the field for entering values. In each such field you will find the corresponding tools adapted to the values required in it.

Creating a style for a new selector

To set font formatting, expand the Font category and set the appropriate style properties, such as:

  • font family: Arial, Tahoma, sans-serif
    (typeface - you can use the Select fonts window)
  • font-size: 9pt
    (font-size - see list of predefined values and list of adjustable options)
You can set a text color (burgundy in this example) in the Colors and Background category:

You can set the text layout options in the Text category:

  • text-align: justify
    (text alignment - a list with available values will help)
  • text-indent : 2em
    (the dialog for selecting a number with a unit will help)

Summary

Above is a simple (but probably the most commonly used) example of using CSS stylesheets. As you browse through the contents of the property list, you will find many more options for formatting text and other page elements. You can affect the appearance of tables, scroll bars (currently only in Internet Explorer), the zoom, position and visibility of items, and much, much more. For example, it is possible to use different styles on the screen and for printing.

By using scripting languages simultaneously with HTML and CSS, you will get the new DHTML (Dynamic HTML) technology, which offers almost unlimited freedom in website design.

CSS property names in many cases explain their purpose themselves. However, if you don't know what a property is used for, move the mouse cursor over the property name and wait a moment - a hint will appear in a balloon.

How to use external CSS files

The most convenient way to create stylesheets is to create a separate file in which all selectors, classes, etc. used in documents will be saved. Thanks to this, any changes to this file will take effect in all documents to which they are attached.

Attaching a * .css file to a document is very easy - just drag it from the file list to the document opened in the editor. Spider will automatically create and paste the appropriate code into the document. This way you can link to * .css files in HTML documents (the <link> tag will be created) and you can link several CSS files together (the @import).

Related topics

To top