Remove certain styles from css when printing

Question

I am going about recreating a document in HTML. Thai is all up and running my issue now is i would like to print the page once it has been generated however i would like to remove some of the css styling applied to the display view. I have this so far...

.containerouter {
    margin:0 auto;
    width:21cm;
    height:29.7cm;
    padding-left:1.7cm;
    padding-right:1.7cm;
    padding-bottom:1.7cm;
    -webkit-box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
    -moz-box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
    box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
}

    @media print{.no-print, .no-print *{display: none !important;}}

<div class="containerouter no-print" media="print"> CONTENT NESTED INSIDE THIS DIV NEEDS TO BE PRINTED </div>

Basically i would like to remove the shadow properties without removing the sizing format already applied. What is currently happening is all of the content is disappearing when print is clicked

Answer 1

There is a media class for adding classes when printing:

@media print {
   [CSS only shown when printing]
}

if you want to remove some css styles you can do it like this:

@media print {
     .containerouter {
         box-shadow: none;
     }
}

You just need to declare the @media print after you define the class so that your media class get higher specificity.