"Cascade DTP V4",#FALSE#,2880,133,0,"PageHead","image1",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"Using Text Classes",#TRUE#,16,30,108,650,52,"Tahoma",#FALSE#,#FALSE#,0,"","",120,131,144,188,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#TRUE#,255,255,255,#FALSE#,3,"none",#TRUE#,760,255,0,"LetterT","image2",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,57,"Impact",#FALSE#,#TRUE#,0,"","",120,209,234,69,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"bold",#FALSE#,0,255,0,"Cas4Explanation","image3",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"The .cas4 file for this page may be downloaded by right clicking here and selecting Save Target As... It can then be opened in Cascade DTP. But please remember to install version 4.0 build 021 - available from the Cascade DTP main page before attempting to follow this tutorial.
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.
",#FALSE#,164,30,402,298,11,"Arial",#FALSE#,#FALSE#,0,"","",130,0,0,0,3,"solid",2,#FALSE#,2,2,2,2,131,144,188,9,#TRUE#,7,9,9,9,#FALSE#,255,255,255,#FALSE#,3,"normal",#FALSE#,0,204,0,"SpanExplanation","image4",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"The word Text in the heading above has been styled using four separate text classes, named LetterT, LetterE, LetterX and LetterT2 respectively.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). Once defined, 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 text classes is that, once defined they can be applied multiple times, even to blocks of text in different text boxes.
",#TRUE#,160,370,733,345,11,"Arial",#FALSE#,#FALSE#,0,"","",130,0,0,0,3,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"none",#TRUE#,0,131,0,"PaddingAndBorders","image5",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"Text Classes are an excellent way of styling sub headings. The example below (contained within the text box named SubHeadExample) uses a text class (SubHead) to give the sub headings a distinctive, but consistent, appearance. Note that there are no paragraph (<P>) tags. Instead, the spacing above the sub head (14 pixels) and the smaller spacing below (4 pixels) is set by the Top and Bottom padding values of the SubHead text class. ",#TRUE#,936,30,113,685,11,"Arial",#FALSE#,#FALSE#,0,"","",130,0,0,0,3,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"bold",#FALSE#,255,144,0,"SubHead","image6",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,14,"Trebuchet MS",#TRUE#,#FALSE#,0,"","",120,59,67,139,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,15,0,0,4,#TRUE#,255,255,255,#FALSE#,3,"normal",#FALSE#,255,188,0,"SubHead2","image7",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,13,"Tahoma",#TRUE#,#FALSE#,0,"","",120,255,255,255,1,"solid",0,#TRUE#,22,0,230,7,255,255,255,3,#TRUE#,3,0,0,3,#FALSE#,65,56,133,#FALSE#,3,"none",#TRUE#,255,255,0,"MenuItem","image8",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,11,"Trebuchet MS",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,2,6,0,0,65,56,133,0,#TRUE#,5,8,0,5,#FALSE#,255,255,204,#FALSE#,3,"bold",#FALSE#,0,255,0,"text9","image9",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"normal",#FALSE#,65,204,0,"text10","image10",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"0.04","0.04",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"Using Text Classes",#FALSE#,56,65,0,"text11","image11",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"dashed",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,133,56,0,"text12","image12",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,255,133,0,"SubHeadExample","image13",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"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, 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.
",#TRUE#,1465,30,216,685,11,"Arial",#FALSE#,#FALSE#,0,"","",130,0,0,0,3,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"SubHeadExample2","image16",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"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.
",#TRUE#,2104,30,159,685,11,"Arial",#FALSE#,#FALSE#,0,"","",130,0,0,0,3,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text19","image19",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text20","image20",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"0.02","0.02",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text21","image21",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"0.14","0.14",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text22","image22",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"0.14","0.14",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"MenuList","image23",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3," ",#TRUE#,2264,313,350,127,10,"Tahoma",#FALSE#,#FALSE#,0,"","",120,0,0,0,3,"solid",0,#TRUE#,0,0,0,2,65,56,133,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"Link","image24",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"Return to the Cascade DTP main page",#TRUE#,2669,232,23,288,11,"Arial",#FALSE#,#FALSE#,0,"","",130,0,0,0,1,"solid",1,#FALSE#,1,1,1,1,141,102,102,0,#TRUE#,0,0,0,0,#FALSE#,255,255,204,#FALSE#,4,"",#FALSE#,0,0,0,"PageExtend","image25",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#TRUE#,2695,303,32,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#TRUE#,255,255,255,#FALSE#,4,"",#FALSE#,0,0,0,"LetterE","image26",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,52,"Georgia",#FALSE#,#FALSE#,0,"","",120,214,118,66,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,7,3,3,0,#FALSE#,255,243,236,#FALSE#,3,"",#FALSE#,0,0,0,"LetterX","image27",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,52,"Arial Black",#TRUE#,#TRUE#,0,"","",120,137,68,194,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"LetterT2","image28",0,0,1,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,67,"Trebuchet MS",#FALSE#,#FALSE#,0,"0","0",120,249,74,127,0,"solid",0,#TRUE#,0,0,0,0,255,255,255,0,#TRUE#,0,5,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text29","image29",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text30","image30",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text31","image31",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text32","image32",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text33","image33",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text34","image34",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text35","image35",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text36","image36",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text37","image37",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text38","image38",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,0,0,0,"text39","image39",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,141,0,0,"text40","image40",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,102,0,0,"text41","image41",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,102,0,0,"text42","image42",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,131,0,0,"text43","image43",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,144,0,0,"text44","image44",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,188,0,0,"text45","image45",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,141,0,0,"text46","image46",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,102,0,0,"text47","image47",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,102,0,0,"text48","image48",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,65,0,0,"text49","image49",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,"",#FALSE#,56,0,0,"text50","image50",0,0,0,0,0,0,0,#FALSE#,"",17,17,150,150,"","",3,"",#FALSE#,17,17,150,150,10,"Arial",#FALSE#,#FALSE#,0,"","",120,0,0,0,0,"solid",0,#TRUE#,0,0,0,0,0,0,0,0,#TRUE#,0,0,0,0,#FALSE#,255,255,255,#FALSE#,3,