htmlcssprintingcss-paged-media

print html on A4 page, media not working

I have requirement to print html page in A4 dimension, plus I want to print content body print along with css, html and ignore menu list, header, footer and page right-side menu list.

To start with this, I have introduce simple div and class noprint and add this in @media print but its seems not working. noprint class works outside the @media print so I know its correct.

Also my requirement is to print directly from browser using standard Ctrl+P keyboard option

<style type="text/css">

    .standardStyle {
        display:block;
        width:200px;
        height:150px;
        padding:10px;
        background-color:green;
        margin:5px;
    }

    @media print{ 
     .noprint{ color:red;}
    }

</style>

</head>
<body>

<div class="noprint standardStyle">
    this is test line....
</div>

<div class="print standardStyle">
    this is test line....
</div>

<div class="print standardStyle">
    this is test line....
</div>

Solution

  • Run the snippet and hit Ctrl+P , you will see the line in red colour. Screenshot :

    enter image description here 

    @media print {
       .noprint { color:red; }
 }
    <div class="noprint">
        this is test line.....
</div>