ArticlesReader.com Menu
Newest Articles
Most Viewed Articles
ArticlesReader.com RSS
Submit Article
Login
Signup
Search the articles

Articles Main Categories
Advice
Animals
Automobiles
Business
Career
Communications
Computer Programming
Computers
Entertainment
Environment
Family
Fashion
Finance
Food
Health & Medical
Home & Garden
Humor
Internet Business
Internet Marketing
Legal
Leisure & Recreation
Marketing
Other
Politics
Reference & Education
Religion
Self Improvement
Sports
Technology & Science
Travel
Writing
Subscribe
Receive alert message from us when new articles submitted to our site for free.

Enter your name

Enter your email

Syndicate

















Related Products
Home::CSS

CSS Print Media Tutorial

Author : Karl Regis

The power of print + CSS So you've made yourself a cutting edge
web page. What next ? Well maybe you want your visitors to be
able to print pages in a certain style. Heavy graphical content
can be removed, background colour changed and navigation items
removed, infact anything to make a printer friendly version of
your page. All this can de done with CSS.

Printer friendly pages with CSS CSS can effectively be used to
create formated documents ready for print. This is quite a
simple process and all we have to do is create and attach a
second style sheet with the attributes required for our print
output. Therefore we have a stylesheet that controlls what you
see on the screen and a style sheet that controls what is
printer. Easy......

Markup changes So, we will have already attached an external
stylesheet in the head code of our document. It should look
something like this:

/>

The tag here has an attribute called media which can have
a variety of options such as screen or print. For a full
description of media types please view our glossary here.

Now, if we want to separate our media into two types - one for
the screen and one for print we must alter our code:

media="screen" />

media="print"/>

We have now defined a separate style sheet for both screen and
print.

The css sheets are now called screen.css and print.css. This
means when a web browser requests your web page screen.css kicks
in for your screen display. When a request is made for a print
preview or print the style is defined by print.css.

This is not an automatic process and we will have to write a new
style sheet called print.css that works in accordance with your
original html document.

In the next section we look at the CSS involved in setting up a
page for print output.

CSS Changes Lets now take a close look at the simple changes we
need to make in our stylesheet and how we can create an
individual print sheet.

Now is the time to define exactly what we want to achieve in our
print output. Maybe we want our website header and logo to be
appear on screen but be omitted on paper.

The easiest way to achieve this is create a class or id called
'header' and define a different style for screen.css and
print.css.

Lets have a look at how the code may look:

Your header id for screen.css may look like this:

#div header { font-family:arial; margin: 0px 0px 2px 2px;
font-size: large; font-weight: bold; background-colour: #000000;
border-colour: #ffffff 1px solid; }

Your header id for print.css may look like this:

#div header { font-family:arial; font-size: 20px; font-weight:
bold; }

The CSS code for screen.css defines font, margin, font size,
font weight, background colour and border colour.

The CSS code for print.css defines only the font, font size and
font weight. To save the visitor ink we have omitted the
background and border and reduces the font size.

If your site is heavy on animated banners or flash movies we can
apply a similar technique to allow the banners to be shown on
the screen only.

Typical markup for you advertisment movies could be like this:

CSS-Help<br />
T-Shirts, click here


Your screen.css stylesheet could contain all kinds of attributes
for the advertisment such as border colour, drop shadows and
position.

In your print.css stylesheet you would want to omit the
advertisement from printing so in you would place the following:

#div.ads { display:none; }

This CSS code will illiminate the advertisement from the print
output.

Hope this helps:

http://www.css-help.com


Spam emails More free articles

Related articles


  1. Introduction To Cascading Style Sheets
  2. CSS: The Basics - ID's and Classes
  3. CSS: The Basics - ID's and Classes ... Correct
  4. CSS - Maximum benefits
  5. Using CCS to Eliminate Tables
  6. CSS Print Media Tutorial
  7. Teach yourself CSS the easy way
  8. Starting Cascading Style Sheets
  9. SEO Benefits Of CSS
  10. 7 Reasons Why Using CSS is a Must
  11. Font Organizers Review, Part I
  12. CSS in Flash the return of crisp and legible fonts.
  13. CSS Browser Detection - The complete guide
  14. Cascading Stylesheets: 5 Reasons To Use CSS
  15. The Power of CSS
  16. Cross Browser Compatibility
  17. Using CSS with Tables
More related feeds
The 10 Best Resources for CSS
First, CSS was built for more than just the Internet. CSS can be used in print media and broadcast media as well. So when you are reading some of the instructions in the official manual you may find some aspects that do not apply to ...

A Web Standards Checklist, How to make a proper website
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print 4.6 Does the site work well in Hand Held devices? This is a hard one to deal with until hand held devices consistently support their correct media type. ...

How To Implement sIFR3 Into Your Website
In this tutorial i will be using the latest version, which can be found at the nightlies directory. The zip file will contain flash, JavaScript and CSS files. Also a live demo is included, the files you need are:. css/sIFR-print.css ...

10 CSS tricks
You’ll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS ...

How to make extension file
css.setAttribute("media","screen, print"); document.getElementsByTagName("head")[0].appendChild(css); } }injectcss();. Copy the code and proceed to How To Make A .js File with CSS Injection. Tutorial below. • Go to http://www.ripway.com ...

Form Elements: 50+ CSS/JS Styling and Functionality Techniques
5-DropDown - xHTML/CSS/Javascript replacement of classic selectbox-While there is no problem with styling input fields, styling selectbox is more complicated and solution isn’t perfect. This tutorial brought visualy better solution ...

A loot of CSS e-books
Print and Other Media - This is a nice look at how to think beyond the browser. Mobility is all the rage nowadays, and it won't be long before we'll be developing sites that cater to handheld devices. This chapter also shows how to go ...

Putting tweaks
css.setAttribute("media","screen, print"); document.getElementsByTagName("head")[0].appendChild(css); } }injectcss(); Do you see the "THE CSS URL"? Just replace it with your CSS URL CODE. If u have some questions,just comment^^ ...

Tutorial CSS Untuk Pemula (3)
css.media = "screen, print"; document.getElementsByTagName("head")[0].appendChild(css);. masukkan URL CSS kmu ke dua tempat berwarna merah di atas.. trus save as contoh indra.txt dan upload lagi.. url yang dihasilkan akan seperti ini: ...

Websites you Shouldn´t have missed in JULY 2008
How to create a wordpress theme from scratch in these 3 parts of tutorial series. Covering Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation. Checkout this Tutorial ...

 


 

© 2007 articlesreader.com - All Rights Reserved