"Media" i CSS..

Om man vill att en ens webbsida ska ha arial på skärmen och times new roman som teckensnitt vid utskrift. Då ska jag väl använda "Media"?

Måste jag göra 2 css-filer för detta? En för skärmvisning och en för utskrift?
Eller kan man på nåt sett göra det i den som man redan skapat?

@media print {
body{
font-family:"times new roman";
}
}

utfyllnad.

Inom samma CSS-fil som jag gjort vanligt för bildskärmsvisning?

Inte en css-fil för print och en css-fil för vanligt på skärmen?

du kan lägga i samma fil om du vill.
vill du så kan du också kapsla in dina vanliga styles med @media screen.

Ursäkta om jag inte var tydlig. Det jag skrev i mitt förra inlägg kan du ha i din vanliga css-fil. Det som står inom @media print kommer att påverka CSS:en vid utskrift.

Ok!

Tänkte ifall..om jag nu vill att vid en utskrift så ska det skrivas ut med time new roman..vart lägger jag in det i koden nedan:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 20px;
	

}
.textformat {
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	text-indent: 0px;
}

h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0px;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
.mybackground {
	background-color: #0066CC;
}
#mytable {
	background-color: #CCCCCC;
	border: 1px solid #FF0000;
	height: 80px;
	width: 90px;

}

och ifrån en sida kan det ut följande:
<link href="magnuscss.css" rel="stylesheet" type="text/css" />

Förslagsvis längst ner så att det inte skrivs över av de andra deklarationerna med samma specificitet.

Ok allra längst ner alltså!?

Allra jätte-längst ner... :)

Provade lägga in följande kod längst ner. Går sedan in i IE och förhandsgranskar för utskrift men ser ingen skillnad.

@media print {
body{
font-family: times new roman;
font-size: 40px;}
}

Det är inte så att CSS-filen du lagt @media print-grejset i bara körs när media är screen? Den bör ju lämpligtvis gå på all.

Jag har printat ut men jag märker ingen skillnad ifrån tidigare.

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 20px;
	

}
.textformat {
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	text-indent: 0px;
}

h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0px;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
.mybackground {
	background-color: #0066CC;
}
#mytable {
	background-color: #CCCCCC;
	border: 1px solid #FF0000;
	height: 80px;
	width: 90px;

}

@media print {
body{
font-family: times new roman;
font-size: 40px;
}

Du behöver nog styla rubriken också!
(sen hade du missat en måsvinge på din senaste kod)

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 20px;
	

}
.textformat {
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	text-indent: 0px;
}

h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0px;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
.mybackground {
	background-color: #0066CC;
}
#mytable {
	background-color: #CCCCCC;
	border: 1px solid #FF0000;
	height: 80px;
	width: 90px;

}

@media print {
	body {
		font-family: times new roman;
		font-size: 40px;
	}
	h3 {
		font-family: times new roman;
	}
}

För att förtydliga VictorY:s fråga: hur ser koden ut där du länkar in CSS-filen? Inlänkningen kan nämnligen begränsa vilka media som CSS-filen kan tillämpas på.

doggelito: det verkar mer logiskt att ta bort 'font-style' från den befintlige h3-regelmängden, då font-egenskaper ärvs och behöver därför inte anges flera gånger.

Fick det att funka när jag la koden ni kollade på i en ny CSS.

Denna koden funkar ej. Vad är det för fel?

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 20px;
	

}

h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0px;
}
.textformat {
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	text-indent: 0px;
}

a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
.mybackground {
	background-color: #0066CC;
}
#mytable1l {
	background-color: #CCCCCC;
	border: 1px solid #FF0000;
	height: 80px;
	width: 90px;
}
#mytable2 td {
	border: 1px solid #FF0000;
}
#bild1 {
	border: 6px dotted #000000;
	margin: 10px;
	padding: 10px;
	float: right;
	width: 10px;
}
html, body {scrollbar-base-color:#6699ff;
scrollbar-arrow-color:#dcdcdc;
scrollbar-higlight-color:#dcdcdc;
scrollbar-3dlight-color:#dcdcdc;
scrollbar-shadow-color:#dcdcdc;
scrollbar-darkshadow-color:#6699ff;
scrollbar-face-color:#6699ff;
scrollbar-track-color:#dcdcdc;}
.aligncenter {
	text-align: center;
}
#s1 {
	background-color: #CCCCCC;
	height: 200px;
	width: 700px;
	border: 5px dotted #FF0000;
}
#L1 {
	position: absolute;
	height: 76px;
	width: 202px;
	left: 507px;
	top: 15px;
}

@media print {
	body {
		font-family: times new roman;
		font-size: 40px;
	}
	h3 {
		font-family: times new roman;
	}
}

Vad är det som inte fungerar?

Media print biter inte. Den gjorde det med den koden som redigerades tidigare som är ovan.

Tog all CSS-kod och la in det i en helt ny tom CSS-fil och koppla till sidorna igen så nu funkar det :)

Brukar ni använda media själva?

Det händer.
Jag brukar typ göra så här:
Om du har ex. en skrivut-knapp som du inte vill få med i utskriften.

@media print {
     .noprint {
          display:none;
     }
}
<input type="button" value="Skriv ut" class="noprint" onclick="self.print();" />