Could not get my custom css while in print view (ctrl + p)

Question

I have created simple html page with my custom css. but while printing mode (ctrl+p), preview do not show css and get content with only html elements.

I have used media="all" but could not work.What should i do?

Answer 1

When you say custom CSS, I'm going to assume that you want the print view styling to be different from the screen view styling. To do this, you don't need to specify any type of media in your link tag. Instead, you could just add a print media query to your CSS by doing @media print { myStyles }. You only need to specify the media in a link tag if you have multiple different stylesheets that should be applied under different circumstances.

When you run the following snippet, the p tag text will change from black font color to red when you enter print view.

.container {
  border: 1px solid red;
  min-height: 100%;
  min-width: 100%;
}

p {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

@media print {
  p {
    color: red;
  }
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

If you don't want the print view CSS to be different from the screen view CSS, you don't have to do anything special. CSS defaults media queries to apply to everything unless you explicitly specify otherwise.