Search
Recommended Products
Related Links

 

 

Informative Articles

Beautiful Web Sites Seldom Make More Sales
Designing an E-commerce Web site is not as simple as having a "pretty" site that is a pleasure to visit. While it is important to have an attractive site, as much thought must be given to functionality as to appearance. Many Web designers seem to...

PHP & Templates
Much in the same way PHP can display dynamically generated content , PHP can change the whole look of your site. Through a template system and simple variable that sets a session containing the user's preferred template, you can make your site...

Top 7 Fundamentals For Google Optimization! Google Seo Tips And Techniques By Expert!
Who doesn’t want to get Top Ranking Positions in Google? 1st Page Placement in Google is NOT difficult, you need to follow Google Optimization Guidelines, and this Article has Summary of the Seven Fundamentals for Google Optimization. Google...

Why CSS Is Good For Your Web Site
Cascading Style Sheets (CSS) are used within the HTML behind your Web site as a way of controlling how each page is laid out and what elements on it look like. For instance, you can use CSS to make headings in your copy a standard size across the...

Why Website Title Tags Are So Important
Ever notice that in the upper left corner of the main bar of the Internet Explorer (IE) browser (most statistics report 84% of Internet users or higher are using IE) there is some text on every website you visit? You can also usually see...

 
CSS Print Media Tutorial

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:





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


Goodbyes From Listeners: Steve Miller
Twenty years ago, Steve Miller's girlfriend left him for another man. Now a writer living in Los Angeles, Miller tells the story of the cold night they parted ways.

Making The Perfect Exit
Madeleine Brand consults writers and thinkers to come up with the perfect ending for <em>Day to Day</em>.

Sock Puppets And Cupcakes
Mike Pesca was a reporter for <em>Day to Day</em> from the beginning. He covered sock puppets, cupcakes and the occasional piece of actual news. He's back with a quirky Pescian farewell to listeners and <em>Day to Day</em> staff.


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 T-Shirts, click here