ansaurus

Question

Is it possible to style a div (and its children) with another stylesheet?

Answer 1

+1 A:

Maybe making the div an iframe that holds a different page styled by the print.css

Alternately you could set the media on print.css tag to be "print" but during print preview you could have a script change the media to "all".

John Isaacks 2009-03-10 16:16:17

but the second approach would interfere with the local styles, wouldn't it?

SilentGhost 2009-03-10 16:21:21

Yes. Plus the parent styles would inherit into the preview div. If you want completely separate styles, you'll have to use a dynamically-written iframe.

bobince 2009-03-10 16:53:58

Print preview utilizes the media='print', so the browser 'print preview' will look like the printed output, not like the screen display.

Traingamer 2009-03-10 20:48:57

Answer 2

+1 A:

Maybe I still haven't grasped your question, but it seems you should be able to do this by simply linking the print.css stylesheet after your main stylesheet, and prefixing all the selectors in print.css with "#preview ".

In the links example, you would need to specify a style like:

#preview a, #preview a:link 
{
    text-decoration:none;
    color:blue;
}

This should be pretty simple unless you are dynamically creating the print.css file.

Joel Potter 2009-03-10 16:59:05

If the main css media type is 'all', and the print css is 'print', then you only need to override these links as @Ithi points out. Good answer.

Traingamer 2009-03-10 20:46:51

Answer 3

A:

<link rel="stylesheet" href="/main.css" type="text/css">
<link rel="stylesheet" href="/print.css" type="text/css">
</head>
<body>
<div id="main">
content
</div>

main.css:
selector1 {style}
selector2 {style}
and so on

print.css:
#print selector1 {style}
#print selector2 {style}
and so on

Then, when you generate your print preview, just change (via JavaScript or whatever) the id of your main wrapper from "main" to "print".

Bill 2009-03-10 17:00:54

Answer 4

A:

As I recall, a more specific CSS declaration will always override a less specific declaration, unless the less specific one is marked as important.

So... #preview element { } will always override element { }

R. Bemrose 2009-03-10 17:17:03

thats not 100% true, there are 4 levels of importance for example #id_declaration are higher than .class_declarations so #mydiv{} would outweigh .mydiv .someotherdiv .childdiv{}

John Isaacks 2009-03-10 17:35:10

Answer 5

A:

Add this to your stylesheet:

@media print {
  #preview a:link {
    color:blue;
  }
}

Nimbuz 2009-11-19 17:24:12

ansaurus

tags:

views:

answers:

Is it possible to style a div (and its children) with another stylesheet?

related questions