Printing Stylesheet Functionality

A special stylesheet is provided in Perfect Layout that applies only when printing a page. This stylesheet optimizes pages for printing by removing backgrounds, simplifying colors, and removing the #navigation and #footer divs. I've left the comments in the css below for more descriptive explainations, if you're interested. See the demo page below for details on exactly what the printing stylesheet does.

Printing Demo

---

Relevant HTML

<link rel="stylesheet" type="text/css" href="../resources/css/print.css" media="print" />

Relevant CSS

/*------------------------------------------------------------*/
/* Print positioning styles.                                  */
/*------------------------------------------------------------*/

#content
{
	margin:0;
	float:left;
}

#content .padding
{
	padding:0;
}

/*------------------------------------------------------------*/
/* Remove #navigation and #footer.                            */
/*------------------------------------------------------------*/

#navigation
{
	display:none;
}

#footer
{
	display:none;
}

/*------------------------------------------------------------*/
/* Customizing display styles.                                */
/*------------------------------------------------------------*/

html
{
	background:#fff;	
}

*
{
	background:#fff;
	color:#000;
}

#header
{
	background:none;
}

#content a
{
	color:#0000ff;
	text-decoration:underline;
}

#content a:visited
{
	color:#000;
}

#content table .tableTop
{
	border:1px solid #000;
	color:#000;
	background:#fff;
}

#content pre
{
	margin:1px;
	width:auto;
	border:none;
	font-weight:bold;
	color:#000;
	background:#fff;
	overflow:inherit;
}

---

« Back to Functionality Index