In this article, we are going to witness applying media print styles in the browser.
Usually, we have different types of media queries
All is used for all media type devices
Print is used for print devices
Screen is used for Computer Screens, Tablets, Smart Phones etc
Speech is used for screenreaders
Styles written in @media print will apply only to printers.
We can't see it in browsers. But using developer tools we can render media print styles in the browser.
Open Chrome Dev Tools -> Click on options (before 'X' icon, top right)
-> More Tools -> Rendering -> Emulate CSS Media Type -> Change Dropdown from 'No emulation' to 'print'
We can also Emulate CSS media feature prefers-color-scheme and prefers-reduced-motion by using the same tool.