PI8 CSS Web Page
This tutorial shows how to use CSS to make the same PI-created web page look different by varying the style sheets to which it is linked. Below you can see screen shots of the original web page without CSS, and with two different style sheets applied. Click the screen shots below to view the full size pages and check out the link rollover effects.
If you want to play with the style sheets, you can get the charcoal and gray style sheets I used above here.
The PI8 defaults of black, 12 pt. Times New Roman HTML text and blue links are pretty dull. It can be tedious to select and format font, font color, font size, and all of your links in the HTML Text Box in order to change the defaults. Linking to an external style sheet can add modest zip to your HTML text and links.
There are many books that show you how to create and use style sheets with your web pages. The one I've found most useful is Cascading Style Sheets: The Designer's Edge by Molly Holzschlag, a book that helped me to understand how to make my own style sheets. Often I'm in a hurry though, and simply use Bradsoft's TopStyle, which lets me make style sheets in a snap by selecting a CSS element and applying color, etc. to it. Great online CSS resources include the Web Design Group, W3schools.com and the amazing Eric Meyer.
Before we get much further, a few caveats about using CSS with PI-created web pages are in order. First, PI web pages are placed into tables that are glued together with a clear spacer.gif. If you change a font size to a much larger size with your style sheet, all of the HTML text may not fit into the table cell PI made for it. So it's a good idea to not increase font size too much. For example, if you use the PI default of 12 point Times New Roman to build a web page, then specify 14 point Verdana in the style sheet, your web page layout will most likely blow up.
Second, although style sheets permit you to control many aspects of HTML display, there may not be a corresponding feature in PI. For example, there is no way to format an H1 header in PI's HTML Text Entry Box, so there's no point in using a style sheet that has an H1 header style included. Still, it is possible to control font, font size and font color, as well as link colors to make your web pages more interesting.
After you build a web page in PI, save it by choosing File, Save for Web, As HTML. Remember, an images subfolder will be created for the images on the web page. The images will be named for the HTML page itself (e.g., images for index.html will be named index_1.gif, index_2.gif, and so on), and saved to the images folder.
Go to My Computer or My Documents to track down the web page you made, and preview it in Internet Explorer. When the browser window opens, select View, Source. The source code will open in Notepad. Starting at the top, scroll down to the line that says
<META NAME="Description" CONTENT="Whatever">
which has a checkmark next to it in the screen shot below, and click to place your cursor there.
Hit Enter to create a carriage return. Then type in the link to your style sheet, shown highlighted in yellow below.
Of course href="gray.css" will be replaced by the name of your own style sheet.
Scroll down in the source code to select and delete all font tags. You can see an example of a font tag highlighted in yellow below. Be sure to delete the little < and > before and after the font tags too.
After you delete all of the font tags, choose File, Save. Notepad will save the edited file. Close Notepad and hit the Refresh button in your browser. The style sheet will be applied to the PI-created web page.
Using Notepad while in View, Source Code is a very easy way to add a style sheet because you don't need an HTML editor to edit the PI-created web page code. If you have an HTML editor, you can open up the PI-created web page in your HTML editor, go into source code view, and do the same thing.
You're stylin' now.
This tutorial uploaded 6/27/03
Do not duplicate, translate, copy, archive, appropriate or redistribute this document.