Bildschirm und Druck haben verschiedene Seitenverhältnisse und Auflösungen. Daher kann es leicht vorkommen, dass der Ausdruck einer Website nur suboptimal aussieht. Einzelne Elemente, wie beispielsweie Menüs wirken am Ausdruck störend und nehmen nur unnötig Platz weg.

Üblicherweise muss das Layout für den Ausdruck in folgenden Bereichen angepasst werden:

• Schriftgrösse: Wenn für die Ausgabe am Bildschirm nicht die logische Masseinheit em verwendet wird, sollte die Schriftgrösse für den Ausdruck auf em geändert werden, da in px deklarierte Schriftgrössen meist zu klein wirken.
• Unnötige Elemente: Manche Elemente wie Menüs, Werbung oder Formulare sind am Ausdruck sinnlos, daher können sie für den Druck versteckt werden.
• Farben: Manche Farben, insbesondere Schriftfarben wirken am Ausdruck schlecht und sollten daher angepasst werden.
• Ränder: Für den Bildschirm deklarierte Element-Ränder können manchmal nicht zum Druck-Layout passen und müssen gegebenenfalls angepasst werden.

Was genau am Layout für den Druck geändert werden muss hängt von der Website ab.

Eine Möglichkeit ist, für den Ausdruck eine eigene HTML-Seite zu genierieren. Dies kann jedoch - abhängig von der verwendeten Technik - relativ aufwändig und wartungsintensiv sein. Eine einfache und schnelle Möglichkeit das Layout für den Druck anzupassen ist die Verwendung von medien-spezifischen Stylesheets.

Um ein gelinktes Stylesheet ausschliesslich für ein bestimmtes Ausgabegerät zu verwenden, steht beim link-tag das Attribut media zur Vefügung (media-attribut referenz auf w3.org). Einer der vordefinierten Augabe-Typen ist print. Die Datei - in unserem Fall ein Stylesheet wird also nur verwendet, wenn es sich um eine Ausgabe auf einen Drucker handelt. Auch auf WEBKONTEXT.net ist das so gelöst:

<link rel="stylesheet" href="fileadmin/templates/css/webkontext_print.css" type="text/css" media="print" />

Dieses Styles-File beinhaltet aussschliesslich Klassen-Deklarationen, die sich von der am Bildschirm verwendeten Deklaration unterscheiden und überschreiben die allgemein gültigen Klassendeklarationen, welche im CSS-File webkontext.css deklariert sind:

<link rel="stylesheet" href="fileadmin/templates/css/webkontext.css" type="text/css" />
<link rel="stylesheet" href="fileadmin/templates/css/webkontext_print.css" type="text/css" media="print" />

Das CSS-File für den Ausdruck kommt zusätzlich zum normalen Stylesheet zur Anwendung, beinhaltet also ausschliesslich Deklarationen die sich von der Bildschirmausgabe unterscheiden

Bei der Anzeige am Bildschirm kommt also nur das CSS-File webkontext.css zur Anwendung, beim Ausdruck zusätzlich das File webkontext_print.css. Da das File webkontext_print.css nach dem allgemein gültigem Stylesheet gelinkt wird, haben die darin enthaltenen Deklarationen höhere Priorität als die Deklarationen des allgemeinen Stylesheets, überschreiben sie also.

Im Fall von WEBKONTEXT.net sind die div-Elemente #menubar, #ldboard, #leftcol und #rightcol am Ausdruck sinnlos und sollen versteckt werden. Da wird mit display: none; erreicht.  Ausserdem  wird die Schriftfarbe für Links  für das Druck-Layout  verändert, da auf  SW-Druckern Orange nur mehr ein blasses Grau ist.

Damit sieht das Stylsheet für Drucker hier so aus:

body, 
h1, h2, h3, h4, h5, h6,
a, a:link, a:hover, a:visited, a:active
{
	color: #000000;
}

#mainbody
{
	/*
	Fuer die Bildschirmanzeige wurde rundherum ein Rahmen definiert
	Den brauchen  wir beim Ausdruck nicht
	*/
	margin: 0px;
	padding: 0px;
	border: none;
}

#titlebar
{
	/* Keine Einrueckung des Logos am Ausdruck */
	margin-left: 0px; 
	padding-left: 0px;
}

#titlebar a img
{
	/* Keine Einrueckung des Logos am Ausdruck */
	margin-left: 0px; 
	padding-left: 0px;
}

#ldboard
{
	display: none;
}

#menubar
{
	display: none;
}

#leftcol
{
	display: none;
}

#rightcol
{
	display: none;
}

#content {
	/* 
	es gibt keine linken und rechten spalten mehr 
	fuer die platz reserviert werden muss 
	*/
	margin-left: 0px;  
	margin-right: 0px;
}

.tx-veguestbook-pi1 form
{
	display: none;
}

p.codeblock, pre.codeblock
{
	font-size: 80%;
}

Das Stylesheet, welches das Layout für den Druck bestimmt beinhaltet also nur wenige Deklarationen.

Die Schriftfarbe für Links und Überschriften wird auf Schwarz geändert.

Dann werden die Ränder der Elemente mainbody, titlebar und titlebar a img angepasst.

Der am Ausdruck verwendete Seitenrand kann nicht browser-unabhängig vom CSS beinflusst werden. Der Seitenrand ist also browser- bzw. Benutzerabhängig. Daher sollten bei en eigentlichen Content-Elementen Ränder vermieden werde um Platz zu sparen.

Dies geschieht hier indem beim alles-umgebenden Element #mainbody die Ränder und Rahmen auf Null gesetzt werden.

Weiters wird das Layout beeinflusst, indem beim Ausdruck unnötige Elemente mit display: none; versteckt werden.

Das Element #content wird weiter verwendet, allerdings werden die margins, welche am Bildschirm Platz für die linke und rechte Spalte reservieren angpeasst (die gibts ja am Ausdruck nicht).