LIS 523 - Balthisar Cascade Lab

This lab will give you some hands-on experience with using Balthisar Cascade to create a style sheet.
  1. Select or create one or more HTML files that contain a reasonable variety of basic codes, including h1, li, and a with href. Make sure each contains a head element in addition to a body.
  2. Run Balthisar Cascade.
  3. Select "Save As..." from the "File" menu, navigate to the folder that contains your sample HTML file or files, and save as a Cascade 2.0 Document, using a filename of your choice.
  4. Select "Save As..." from the "File" menu again and save as a Cascading Style Sheet.
  5. Check the folder contents to make sure that both files have been saved.*
  6. Select "Apply Stylesheet to HTML File(s)..." from the "Tools" menu. In the dialog, select your sample HTML files and click on the "Open" button. A "Stylesheet URL Needed" dialog should now pop up, allowing you to confirm the name of the stylesheet that you just saved. Click on the "Okay" button.
  7. Run a graphical browser and open one or more of your sample HTML files. At this point, a sample page will normally look very much like the original, because the style sheet does not contain much.
  8. View the source. You should see that the head now contains a link element like the following:
    <LINK REL=STYLESHEET TYPE="text/css" HREF="test.css" TITLE="none">
    To see what the style sheet looks like, click on the "Preview" button at the bottom right and click on "Preview all classes".
  9. Returning to Balthisar Cascade, you will begin by changing the style of an existing element. Click on "H1" in the list at left. Go to the "Text" tab in the middle panel if you are not already there. Check the "Letter Spacing" checkbox, click on the first radio button below, and set the letter spacing to 8 points. Check the "Word Spacing" checkbox, click on the first radio button below, and set the word spacing to 16 points.
  10. Go to the "Font" tab. Check the "Font Family" checkbox, click on the first radio button below, and set the first font choice to a cursive font (such as Magneto), the second to Arial, and the third to "cursive". Check the "Font Size" checkbox, click on the third radio button below, and set the percentage to 200%. Check the "Font Weight" checkbox, click on the second button below, and click on "bold". Check the "Font Stretch" checkbox, click on the button below, and click on "expanded".
  11. Go to the "Color/Background" tab. Check the "Color (foreground)" checkbox, click on the first radio button below, click on the "..." button, use the color picker to pick maroon, and click on the "OK" button. Proceed in the same way for the background color, selecting a light pink.
  12. Go to the "Borders" tab. Set the top and left border colors to an even lighter pink than the background and the bottom and right border colors to a darker pink. Set the border style to solid in each case.
  13. Go to the "Margins" tab. Set the top and bottom padding to 2% and the left and right padding to 5%.
  14. Save as a Cascading Style Sheet, keeping the same name as you used before.
  15. Switch to the browser and reload your sample HTML file or files. You should see your changes reflected in the rendering of the pages.
  16. Next, you will practice adding a new HTML element. Select "New Element" from the "Classes" menu. In the "Create HTML element" dialog, select "LI" from the drop-down list and click on "OK".
  17. Go to the "Lists" tab. Set the list style type to "lower-roman".
  18. Save again as a Cascading Style Sheet.
  19. Reload your sample HTML file or files in the browser to see the results. You should see all list items numbered with lower case Roman numerals, even if the type attribute of the ol or ul tag specifies something else.
  20. A stylesheet can also be used to set behavior when the mouse passes over an element of a particular class. This capability is very often used with links. Click on "A" in the list at left. Select "Pseudoclass" from the "Classes" menu. In the "Create a Pseudoclass or Pseudoelement" dialog, select ":hover" from the drop-down list and click on "Okay".
  21. Go to the "Color/Background" tab. change the foreground color to green and the background color to a very light green.
  22. Preview the results. Note what happens when the mouse cursor moves over a link.
  23. Some HTML elements are not on the list for addition, but you can specify them by hand. Do this for the body element: in the "Create HTML Element" dialog, type in BODY and click on "OK";
  24. Go to the "Color/Background" tab. Set the foreground color to a dark brown.
  25. Save as a Cascading Style Sheet and preview the results in the browser. You should see the brown color reflected in any text where the color is not otherwise specified.
  26. Finally save the changes as a Cascade 2.0 Document and close Balthisar Cascade.

Apart from your sample HTML files, you should now have 2 files created with Cascade: a .WWS2 file and a .CSS file. Submit these 2 files as e-mail attachments.

* If you find that Balthisar Cascade is not saving the .CSS file, try the following workaround. Click on the "Preview" button at the lower right and select "Preview Tagged Classes"; right click on the box that shows the stylesheet preview and select "Copy All Preview Text"; run a text editor, such as Notepad, paste the copied text from the clipboard, and save the file with the desired name and the extension .CSS (when saving in Notepad, exclose the file name and extension in double quotes to prevent the automatic addition of the extension .txt).


Home

Last updated February 24, 2006.
This page maintained by Prof. Tim Craven
E-mail (text/plain only): craven@uwo.ca
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7