media print CSS

Question

I'm currently working with media queries in CSS, I've not used media print before. At the button of the file where @media print is defined, is there a way to strip all formatting without having to copy all elements? I deleted most of the styling rules for brevity.

Yes this is for an assignment, my question goes beyond the scope of the class and is just form my personal knowledge.

    nav.sitenavigation {
	color: yellow;
	background-color: rgb(241,90,36);
	text-align: center;
}
nav.sitenavigation p{
	display: inline-block;
	margin: .4em .6em;
	font-size: 1.6em;
}
nav.sitenavigation a:link{
	text-decoration: none;
	color: yellow;
	
}
nav.sitenavigation a:visited {
	color: white;
}
nav.sitenavigation a:hover {
	color: yellow;
	text-shadow: 1px -1px 0 black;
}
nav.sitenavigation a:focus {
	color: yellow;
	text-shadow: 1px -1px 0 black;
}
nav.sitenavigation a:active {
	position: relative;
	top: 1px;
	left: 1px;
}

/* body and page container */
body {
   font-family: Lato, Arial, Helvetica, sans-serif;
   background-color: #faebbf;
}
.container {
   max-width: 800px;
   margin: 0 auto;
   background-color: #6ac238;
   position: relative;
}
/* Skip Nav section */
p.skipnavigation {
	position: absolute;
	left: -10000px;
}
p.skipnavigation a:focus {
	color: black;
	background-color: white;
	position: relative;
	top: .4em;
	left: auto;
	right: .4em;
	z-index: 2;
}
/* print styles */
@media print {
   .container, h1, h2, header, header p, nav p, nav, div, article, p.sitenavigation, nav.sitenavigation, nav.sitenavigation a:visited , p.skipnavigation a:focus, nav.sitenavigation a:link  {
      color: black;
      background-color: white;
   }
}
@page {
   margin: 1in;
}

Answer 1

I think you can not do it otherwise with pure css. There is other easier ways to make SCSS, the code is cleaner.

Another way, would you upload a specific file to the print medium, in this way, you can centralize all the styling for a certain type of screen, facilitating maintainability.

Something like this:

<link rel="stylesheet" media="print" href="http://foo.com/mystyle.css" />

For more informations, look here.

I have helped in some way.

Answer 2

Stripping all formatting is probably not what you want - try it, but trust that it's going to look pretty weird. You might be better off stripping specific styles, like * { background: none transparent; color: #000; }, for starters. The * selector will target everything, so use carefully.

If you really want to remove every style, there's * { all: unset } or * { all: initial } - these have slightly different behaviors, but be aware, browser support for all isn't perfect.

You could also look at the various css resets out there, which strip or normalize most styles.