This Example Only Works with Internet Explorer...
See the source code portion to see how to have this work for Netscape/Mozilla!
(Thanks to alert 4Guys reader Miles Feinberg for the client-side code for IE.)
Welcome to My Web Site!

 

Sections

 

Neat Links

Welcome to Scott's Personal Homepage!

This is my very own personal home page! Rather than provide a link to get to a "printer friendly" view, I use stylesheets!

Printer-Friendly View Return to Normal View

 

Source Code
CSS Stylesheet normal.css
BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
.navStuff
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial
}
TABLE
{
    FONT-SIZE: 10pt
}
.showOnlyInPrinterFriendlyView
{
    DISPLAY: none
}
.showOnlyInNormalView
{
}
CSS Stylesheet printStyle.css
BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
.navStuff
{
    DISPLAY: none
}
.showOnlyInPrinterFriendlyView
{
}
.showOnlyInNormalView
{
    DISPLAY: none
}
a:after
{
	content:' [' attr(href) '] '
}
HTML Source
<HTML>
<HEAD>
<TITLE>Alternate CSS Example</TITLE>
<script language="JavaScript">
<!--
   function printerFriendlyView()
   {
      document.styleSheets[0].href = "/webtech/code/printStyle.css";
      
//  To work with Mozilla/Netscape, comment out the above and uncomment below
//      document.styleSheets[0].disabled = true;
//      document.styleSheets[1].disabled = false;
      
   }

   function normalView()
   {
	  document.styleSheets[0].href = "/webtech/code/normal.css";

//  To work with Mozilla/Netscape, comment out the above and uncomment below
//      document.styleSheets[0].disabled = false;
//      document.styleSheets[1].disabled = true;

// -->
</script>
<link rel="stylesheet" type="text/css" href="/webtech/code/normal.css" title="Normal Style">
<link rel="alternate stylesheet" title="Printer-Friendly Style" type="text/css" href="/webtech/code/printStyle.css">
</HEAD>
<BODY>

   <table width="100%" border="0">
      <tr><td width="200" class="navStuff" align="center" valign="top">
         <font size="+2"><b>Welcome to My Web Site!</b></font>
         <p> </p>
         <table border="0" width="80%" cellspacing="0" align="center">
           <tr><th bgcolor="#336699">
            <font color="white">Sections</font>
           </th></tr>
           <tr><td bgcolor="#eeeeee">
            <ul>
               <li><a href="/">Home</a></li>
               <li><a href="/webtech/">ASP Information</a></li>
               <li><a href="http://www.aspfaqs.com/">ASP FAQs</a></li>
               <li><a href="http://aspnet.4guysfromrolla.com/">ASP.NET Information</a></li>
               <li><a href="http://www.aspmessageboard.com/">Questions on ASP?</a></li>
            </ul>
           </td></tr>
         </table>
         <p> </p>
         <table border="0" width="80%" cellspacing="0" align="center">
           <tr><th bgcolor="#336699">
            <font color="white">Neat Links</font>
           </th></tr>
           <tr><td bgcolor="#eeeeee">
            <ul>
               <li><a href="http://slashdot.org">Slashdot</a></li>
               <li><a href="http://itsyourturn.com/">ItsYourTurn.com</a></li>
               <li><a href="http://www.asp.net/forums/">ASP.NET Forums</a></li>
               <li><a href="http://datawebcontrols.com/">DataWebControls.com</a></li>               
            </ul>
           </td></tr>
         </table>
         
      </td>
      <td width="*" valign="top">
         <p align="center"><font size="+2"><b>Welcome to Scott's Personal Homepage!</b></font></p>
         <p>
         This is my very own personal home page!  Rather than provide a link to get to a
         "printer friendly" view, I use stylesheets! 
         <p>
            <a class="showOnlyInNormalView" href="javascript:printerFriendlyView();">Printer-Friendly View</a>
            <a class="showOnlyInPrinterFriendlyView" href="javascript:normalView();">Return to Normal View</a>
         </p>
      </td></tr>
   </table>

</BODY>
</HTML>

[Return to the article...]