---
title: "\"Media\" i CSS.."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/168166-media-i-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Kalle M"
published: "2008-01-16T19:07:23.000Z"
updated: "2008-01-19T14:02:18.000Z"
replies: 21
views: 891
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/168166-media-i-css"
---

# "Media" i CSS..

_Sida 1 av 2._

## #1 — Kalle M, 2008-01-16T19:07Z

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?

Permalänk: https://www.webforum.nu/p/168166

## #2 — Okkido, 2008-01-16T19:18Z

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

 utfyllnad.

Permalänk: https://www.webforum.nu/p/2070848

## #3 — Kalle M, 2008-01-16T19:24Z

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?

Permalänk: https://www.webforum.nu/p/2070854

## #4 — doggelito, 2008-01-16T19:26Z

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

Permalänk: https://www.webforum.nu/p/2070855

## #5 — Okkido, 2008-01-16T19:37Z

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.

Permalänk: https://www.webforum.nu/p/2070857

## #6 — Kalle M, 2008-01-16T20:22Z

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" /\>

Permalänk: https://www.webforum.nu/p/2070862

## #7 — zcorpan, 2008-01-16T20:31Z

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

Permalänk: https://www.webforum.nu/p/2070869

## #8 — Kalle M, 2008-01-16T20:35Z

Ok allra längst ner alltså!?

Permalänk: https://www.webforum.nu/p/2070870

## #9 — zcorpan, 2008-01-16T20:39Z

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

Permalänk: https://www.webforum.nu/p/2070873

## #10 — Kalle M, 2008-01-16T20:48Z

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;}
}
```

Permalänk: https://www.webforum.nu/p/2070876

## #11 — VictorY, 2008-01-16T20:54Z

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*.

Permalänk: https://www.webforum.nu/p/2070883

## #12 — Kalle M, 2008-01-16T20:58Z

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

Permalänk: https://www.webforum.nu/p/2070884

## #13 — Kalle M, 2008-01-16T21:00Z

```
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;
}
```

Permalänk: https://www.webforum.nu/p/2070885

## #14 — doggelito, 2008-01-16T21:14Z

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;
	}
}
```

Permalänk: https://www.webforum.nu/p/2070890

## #15 — zcorpan, 2008-01-16T22:16Z

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.

Permalänk: https://www.webforum.nu/p/2070903

## #16 — Kalle M, 2008-01-18T08:20Z

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;
	}
}
```

Permalänk: https://www.webforum.nu/p/2071142

## #17 — Okkido, 2008-01-18T09:36Z

Vad är det som inte fungerar?

Permalänk: https://www.webforum.nu/p/2071157

## #18 — Kalle M, 2008-01-18T12:27Z

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

Permalänk: https://www.webforum.nu/p/2071180

## #19 — Kalle M, 2008-01-18T12:34Z

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?

Permalänk: https://www.webforum.nu/p/2071181

## #20 — doggelito, 2008-01-18T12:49Z

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();" />
```

Permalänk: https://www.webforum.nu/p/2071184

---

Tråden på webben: https://www.webforum.nu/amne/html-css/168166-media-i-css  
Nästa sida: https://www.webforum.nu/amne/html-css/168166-media-i-css/page2.md