Can someone tell me why this print.css does not yield black text on a white background. Thanks!

 

@media print
{
.noPrint {
display: none;
}

p {color: #000000;}
h1 {color: #000000;}
h2 {color: #000000;}
h3 {color: #000000;}
a:link {color: #000000;} /* unvisited link */
a:visited {color: #000000;} /* visited link */
a:hover {color: #000000;}
a:active {color: #000000;}

.box1 {
background-color: #FFFFFF;
color: #000000;
}
}

It can only be in some part of your code that you have not revealed.

here is th style part of my page:

 

<style type="text/css">
body
{
background-color: grey;
color:#FDD017;
margin-left:7px;
}

h1 {font-family:"Times New Roman",Times,serif; color:#FDD017;}
h2 {font-family:"Times New Roman",Times,serif; color:#52A488;}
h3 {font-family:"Times New Roman",Times,serif; font-size:17pt; color:#FDD017;}
p {font-family:"Times New Roman",Times,serif; font-size:14pt; line-height:150%; max-width: 850px;}
a:link {color:#FFFF00;} /* unvisited link */
a:visited {color:#D4A017;} /* visited link */
a:hover {color:#FDD017;} /* hover link */
a:active {color:#C1CDC1;} /* selected link */

#box1
{
background-color:#800000;
max-width:830px;
border: 2px solid #FDD017;
margin-left:auto;
margin-right:auto;
padding: 30px;
}

@media screen and (max-width: 1000px)
{
body {background-color:#800000; color:#FDD017; margin-left:7px; overflow-wrap:break-word;}
h1 {font-family:"Times New Roman",Times,serif; color:#FDD017;}
h2 {font-family:"Times New Roman",Times,serif; color:#52A488;}
h3 {font-family:"Times New Roman",Times,serif; font-size:17pt; color:#FDD017;}
p {font-family:"Times New Roman",Times,serif; font-size:14pt; line-height:150%; max-width: 850px;}
a:link {color:#FFFF00;} /* unvisited link */
a:visited {color:#D4A017;} /* visited link */
a:hover {color:#FDD017;} /* hover link */
a:active {color:#C1CDC1;} /* selected link */
}
</style>

When you have the page open in your browser, right click on an element and choose (depending on your browser) something like Inspect. The browser developer window should then enable you to see which style declarations are in use and which are not. If it isn't behaving as you think it should it could be poor syntax, errors, specificity, inheritance or simply the order of the styles.

 

Much like theology Jaques. A piece of text out of context can give you a very wrong answer. It needs to be understood in it's wider context.

TimW, I'm trying to keep a balance between theology and website building. It occasionally seems like I'm losing on both fronts. But I must keep trying.

Where are you placing your print styles, before or after the rest of your CSS?

link to the page would be easiest

jacquesgauvin.net

You don't need a print media query and a separate print stylesheet, the stylesheet will work by itself. Try moving the print styles below the others and removing the separate stylesheet, for this much CSS it doesn't warrant an additional http request.

<style>
body 
{
background-color: grey;
color:#FDD017;
margin-left:7px;
}

h1 {font-family:"Times New Roman",Times,serif; color:#FDD017;}
h2 {font-family:"Times New Roman",Times,serif; color:#52A488;}
h3 {font-family:"Times New Roman",Times,serif; font-size:17pt; color:#FDD017;}
p {font-family:"Times New Roman",Times,serif; font-size:14pt; line-height:150%; max-width: 850px;}
a:link {color:#FFFF00;}    /* unvisited link */
a:visited {color:#D4A017;} /* visited link */
a:hover {color:#FDD017;}   /* hover link */
a:active {color:#C1CDC1;}  /* selected link */

    #box1
    {
    background-color:#800000;
    max-width:830px;
    border: 2px solid #FDD017;
    margin-left:auto;
    margin-right:auto;
    padding: 30px;
    }
 
@media screen and (max-width: 1000px) 
{
body {background-color:#800000; color:#FDD017; margin-left:7px; overflow-wrap:break-word;}
h1 {font-family:"Times New Roman",Times,serif; color:#FDD017;}
h2 {font-family:"Times New Roman",Times,serif; color:#52A488;}
h3 {font-family:"Times New Roman",Times,serif; font-size:17pt; color:#FDD017;}
p {font-family:"Times New Roman",Times,serif; font-size:14pt; line-height:150%; max-width: 850px;}
a:link {color:#FFFF00;}    /* unvisited link */
a:visited {color:#D4A017;} /* visited link */
a:hover {color:#FDD017;}   /* hover link */
a:active {color:#C1CDC1;}  /* selected link */  
}

@media print {
.noPrint { 
  display: none; 
} 

p {color: #000000;}
h1 {color: #000000;}
h2 {color: #000000;}
h3 {color: #000000;}
a:link {color: #000000;}    /* unvisited link */
a:visited {color: #000000;} /* visited link */
a:hover {color: #000000;}
a:active {color: #000000;} 	

.box1 {
background-color: #FFFFFF;
color: #000000;
}
}
</style>