CODEWITHSUNDEEP
css
AKor
AKor

Reputation: 8882

Having printed matter use an exclusive stylesheet

Currently I have my stylesheets as such:

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

Is there a way to force style.css to be only on a monitor, and force print to only be on printed matter? I'm trying to make a printer-friendly page and it's taking forever to override the mass of rules in style.css.

Upvotes: 0

Views: 58

Answers (1)

BoltClock
BoltClock

Reputation: 723428

Use media="screen" on the main stylesheet so styles are only applied on a monitor screen:

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

If you don't specify a media attribute, the stylesheet takes a default of media="all", which means styles are applied everywhere.

Read more about media types here (HTML spec) and here (CSS spec).

Upvotes: 2

Related Questions