Use Css Media print property to design printable pages on websites

cascading style sheet(css) have two media type 1.screen 2.print . Both media type can be use as external and inline style sheet.

media="screen"

media type screen is used when general css for window is used

To use screen type as externel stylesheet
: <link rel="stylesheet" type="text/css" href="screen.css" media="screen" >

To use screen type as internel stylsheet
: @media screen {
body { your css property here }
h1{ css property here }
}

media="print"

media type print is used when a different css is require for printing same page.

To use print type as external stylesheet
: <link rel="stylesheet" type="text/css" href="print.css" media="print" >

To use print type as internal stylesheet
: @media print {
body { your css property here }
h1{ css property here }
}

Difference b/w screen and print type

print page

Screen page

HAVE A DEMO click here

HTML Code

Screen.css Code

Print.css Code

media print should have it's different coding than media screen.Because when a print is given for a page all css of printing page is contained in print.css. So use it in your manner.
If you have not understand media print property.than let comment below to make this page more feasible to understand easily.

Use Css Media print property to design printable pages on websites

1 comments:

Translate