CSS PRINTING | Change the Appearance Of Web Page When Printed

In this tutorial we will be discussing about CSS PRINTING. This topic entails how you can tweak the appearance of your web page when printed on paper. In our previous tutorial we looked at CSS AURAL MEDIA which entails how to structure a web page for speech synthesizing. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS AURAL MEDIA | Learn How to Attach Sounds to Web Documents


CSS allows developers to specify a different appearance of their web page document when printed on paper. This appearance can be different from when its been viewed on screen. This can be achieved using the @media rules property we learnt about earlier. The below example shows how to specify different appearance for printing and screen viewing

<style type = "text/css">
      @media print {
        p.bodystyle {font-family:sans-serif;}
@media screen {
         p.bodystyle {font-family:cambria, sans-serif;}
      @media screen, print {
         p.bodystyle {font-size:15pt}


Now you have learnt a little tweak on how to style the printing of your web document on paper and the display on screen. lets move on to the next topic on CSS LAYOUT

What do you think?

css aural media

CSS AURAL MEDIA | Learn How to Attach Sounds to Web Documents

css layout

CSS LAYOUT | Steps To Structure a Beautiful Layout Using CSS