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 a stylesheet with the media property set to print! Simply print out this Web page and you will see that the navigational items to the left do not appear in the print-out. Neat!

This is an example of how hyperlinks are displayed in the printer-friendly version: Visit DataWebControls.com!. (You have to print out the Web page, or go to File/Print Preview to see the output of hyperlinks.) Pretty neat, eh? Here's another example: Learn more about ASP.NET!.

 

Source Code
The printStyle.css CSS Stylesheet Contents
BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
.navStuff
{
    DISPLAY: none
}
a:after
{
	content:' [' attr(href) '] '
}			
			

The HTML For the Web Page

<HTML>
<HEAD>
<TITLE>CSS Print Media Example</TITLE>
<link rel="stylesheet" media="print" title="Printer-Friendly Style" 
         type="text/css" href="/webtech/code/printStyle.css">
<style type="text/css">
BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
TABLE
{
    FONT-SIZE: 10pt
}
</style>
</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 a stylesheet with the <code>media</code> 
         property set to <code>print</code>!  Simply print out this Web page and 
         you will see that the navigational items to the left do not appear in the print-out.
         Neat!
         </p>
         <p>
         This is an example of how hyperlinks are displayed in the printer-friendly version:
         <a href="http://datawebcontrols.com/">Visit DataWebControls.com!</a>.  
         (You have to print out the Web page, or go to File/Print Preview to see the output 
         of hyperlinks.) Pretty neat, eh?  Here's another example: 
         <a href="http://www.asp.net/">Learn more about ASP.NET!</a>.
      </td></tr>
   </table>
</BODY>
</HTML>
			

[Return to the article...]