Page View: most of the effects created by applying text classes will not be visible on the page view within Cascade DTP. To see these, use either Preview or Box Preview (menu bar).
Note: the text boxes have been locked to prevent accidental changes or deletion. If you wish to move or resize any of them, click the unlock symbol (padlock) at the top of the Text Properties Dialog.
A text class is merely a list of Cascading Style Sheet (CSS) commands that dictate the appearance of text, but not its absolute position. So, whereas a text box is defined by commands that include Top, Left, Width and Height - all of which control the position and size of the area containing the text placed in it - a text class only contains commands for font name, size, alignment, color and padding etc.
The words 'Using Text Classes' are contained in a text box named PageHead. The appearance of the letters in the word 'Text' were then defined by creating four separate text classes. To do this, select Text Class (menu bar) and then New (or use the keyboard shortcut Ctrl + W). The classes are applied by loading the heading text into the Text Editor (double click the box named PageHead), selecting a letter of the word Text, and then clicking the Span button (located just underneath the text window, at the right). This will launch a Select Text Class dialog containing a listing each text class, including LetterT, LetterE, LetterX and LetterT2.
The Span tag applies the style without breaking the line of text. Conversely, the Div tag (obtained by clicking the button located just above Span) adds line breaks before and after the selected text, thus separating the styled text from that around it.
Although not exploited in this example, the main advantage of a text class is that once defined it can be applied multiple times, even within a number of separate text boxes.
Cascade DTP does not automatically provide a means of applying the CSS margin property (although margin code can be added using the Style Sheet Editor dialog - click More at the bottom of the editor window to access the margin commands).
However, it is often possible to use a combination of padding and border values to obtain the desired effect. In the example below, Top and Bottom padding values of 3 pixels are used within the Text Class SubHead2 to extend the dark blue background above and below the white sub head text. The space above and below the sub heads is created using Top and Bottom border width values of 22 and 7 pixels respectively. Because the border color has been made white, this achieves the same affect as a margin. The width of the dark blue sub head background has been controlled using a Right border width value of 230 pixels.
Link lists (menus) can also be styled using a Text class. In the example below, the dark blue horizontal dividers are defined within the MenuItem Text Class using a Top border width of 2 pixels. Unfortunately, this alone would result in there being no line underneath the last menu item (12). The problem has been solved by specifying a Bottom border of 2 pixels within the containing text box (MenuList), and then carefully adjusting the height of this box in order to position the line.
As with the Sub headings described above, the MenuItem Class is applied using a Div tag.