Tag Archives: CSS

Style Sheets for Printing

Modified the paralegal internet research page, to display answers to the lab problems after a code is given in a form. Used a php header statement to redirect to the print page if the correct code was given.

I freaked out a little. After doing a lot of work to get this page to work correctly, I tried to print the hand out. The print-out looked nothing like what displayed on screen. The answers were not indented, the font color was missing, the automatic numbers were gone.

Turns out, it was a problem with my stylesheet reference. I had been using

<link rel=”stylesheet” type=”text/css” href=”http://www.glenpritchard.com/css/global-styles.css” media=”screen”>

The problem was ‘media=”screen”‘. I did not know that you can specify different style sheets for printing and on-screen viewing. Specifying ‘media=”screen”‘ means that the style sheet will be used for what is displayed on the screen and not what prints.  Using ‘media=”print”‘ will work for printing, but not anything else. To use the same style sheet for all purposes, ‘media=”all”‘ may be used.

W3C has a nice reference about style sheets. It also has a reference about media types.

Update: Because the style sheets are cascading, there was no need to redirect the research page to a separate print template. The same page can be used for screen and print! For future reference, the redirect code, which must go at the top before the <html> tag,  looks like this:

if($_GET[“code”]==”reject4053″) {

Modify WordPress Default 1.6 Theme Background

Edited stylesheet.css as follows (added text is green; commented out text is red):

/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;

/*GRP Edit    background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);*/
color: #333;
text-align: center;