Style sheet for printing; unexpected behavior of asterisk

According to what I have read, the asterisk (*) in a style sheet is a wildcard, which will applies styles to all elements in that portion of the DOM.

Which I have used to try and write a separate stylesheet for printing. The idea is to load up my primary (i.e. overall) style sheet first, followed by a second style sheet containing overrides for printing. So in the HTML page header I have:

[code=html]<link rel=”stylesheet” type=”text/css” href=”reset.css” />
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />[/code]

The reset.css style sheet is your basic reset style sheet to reset all styles to known default so as not to waste time, sweat and inappropriate language on the peccadilloes of various browsers and their quirks. The style.css style sheet contains all styles for all media types and is the one that styles the website. It has one little extra:

[CODE].printOnly {
display: none;
}[/CODE]

which allows me to add content elements that will only appear on printed hardcopy. E.g.:

[code=html]<div class=”printOnly”>This document was printed from www.website.com</div>[/code]

Then, in print.css, I thought that all I needed was:

[CODE]/* Print stylesheet, affects hardcopy only */

.printOnly {
display: inline;
}

.menu, .screenOnly, .nav { /* Do not print menu’s, navigation and screen-only elements */
display: none;
}

* {
color: #000000;
font-family: “Times New Roman”, serif;
font-size: 12pt;
background-color: #ffffff;
background-image: none;
}[/CODE]

The idea here is, of course, to render all content text in 12 points Times New Roman, black on white, with no background images. Menu’s, other navigation elements in the content container, and elements therein marked as class “screenOnly” will not be printed.

However, I find that the asterisk element only overrides part of the styles specified in style.css. While text does appear black on white, the font is the same as the one used on screen (Arial, Helvetica, sans-serif) and header elements have retained their on-screen colours rather than being rendered in black. Anchors (links) embedded in the text also retain their on-screen style (bold font, red color).

I fail to understand why text color is affected by the asterisk override but the font family isn’t, or why text in a paragraph appears black on white but an anchor embedded in that same text doesn’t.

Suggestions, anyone?

// FvW

Also in #CSS _↴