Print stylesheets & overriding a base theme style sheet

Question

Since adding a print style sheet and marking the screen stylesheets accordingly:

stylesheets[screen][] = css/example.css

rather than

stylesheets[all][] = css/example.css 

The Genesis base themes are overriding the similarly named site styles in my sub theme. Specifically /sites/all/themes/genesis/genesis/css/layout.css is overriding my sub-theme layout.css file.

I've tried adding 'fake' calls to empty stylesheets (as per 'Overriding style sheets from modules and base themes'), with no success:

;----------// Modular Stylesheets

; Stop base overrides with fake file
; http://drupal.org/node/225125#comment-3028740
; http://drupal.org/node/263967
stylesheets[all][] = css/base.css
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/blocks.css
stylesheets[all][] = css/comments.css
stylesheets[all][] = css/nodes.css
stylesheets[all][] = css/page.css
stylesheets[all][] = css/style.css

; block, comment, node, page and style CSS.
stylesheets[screen][] = css/blocks.css
stylesheets[screen][] = css/comments.css
stylesheets[screen][] = css/nodes.css
stylesheets[screen][] = css/page.css
stylesheets[screen][] = css/style.css
stylesheets[screen][] = css/layout.css
stylesheets[screen][] = css/forms.css
stylesheets[screen][] = css/rows.css

; Print css
stylesheets[print][] = css/print.css

I think the issue is that the later [screen] type is included as an extra stylesheet, rather than overriding the first [all]. But I can't see a way round it ....

Answer 1

You shouldn't be doing

stylesheets[][] = ...

Instead you should be doing

stylesheets[type][] = ...

type is the type of media to include the stylesheet for, like all, screen etc.

Answer 2

Is it a problem to have both CSS stylesheets included? I guess not. screen and print will have similar CSS styles on some items.

So just override in your CSS stylesheet for 'print'... This way you don't have to override the whole CSS page.

Example: stylesheets[all][] = css/style.css

H1 {
font: Georgia 0.9em;
color: red;
}

stylesheets[print][] = css/print.css

H1 {
color: black;
}

Both CSS files are loaded, no problem. Font is used from the first stylesheet, but the color value is overridden in print.css...