| > | | | | setting up a page for print output. |
| | | | CSS Changes |
| The power of print + CSS | | | | Lets now take a close look at the simple changes we |
| So you've made yourself a cutting edge web page. | | | | need to make in our stylesheet and how we can |
| What next ? Well maybe you want your visitors to | | | | create an individual print sheet. |
| be able to print pages in a certain style. Heavy | | | | Now is the time to define exactly what we want to |
| graphical content can be removed, background colour | | | | achieve in our print output. Maybe we want our |
| changed and navigation items removed, infact | | | | website header and logo to be appear on screen but |
| anything to make a printer friendly version of your | | | | be omitted on paper. |
| page. All this can de done with CSS. | | | | The easiest way to achieve this is create a class or |
| Printer friendly pages with CSS | | | | id called 'header' and define a different style for |
| CSS can effectively be used to create formated | | | | screen.css and print.css. |
| documents ready for print. | | | | Lets have a look at how the code may look: |
| This is quite a simple process and all we have to do is | | | | Your header id for screen.css may look like this: |
| create and attach a second style sheet with the | | | | #div header {font-family:arial;margin: 0px 0px 2px |
| attributes required for our print output. Therefore we | | | | 2px;font-size: large;font-weight: |
| have a stylesheet that controlls what you see on the | | | | bold;background-colour: #000000;border-colour: |
| screen and a style sheet that controls what is printer. | | | | #ffffff 1px solid; |
| Easy...... | | | | } |
| Markup changes | | | | Your header id for print.css may look like this: |
| So, we will have already attached an external | | | | #div header {font-family:arial;font-size: |
| stylesheet in the head code of our document. It | | | | 20px;font-weight: bold; |
| should look something like this: | | | | } |
| The tag here has an attribute called media which can | | | | The CSS code for screen.css defines font, margin, |
| have a variety of options such as screen or print. For | | | | font size, font weight, background colour and border |
| a full description of media types please view our | | | | colour. |
| glossary here. | | | | The CSS code for print.css defines only the font, |
| Now, if we want to separate our media into two | | | | font size and font weight. To save the visitor ink we |
| types - one for the screen and one for print we | | | | have omitted the background and border and |
| must alter our code: | | | | reduces the font size. |
| We have now defined a separate style sheet for | | | | If your site is heavy on animated banners or flash |
| both screen and print. | | | | movies we can apply a similar technique to allow the |
| The css sheets are now called screen.css and | | | | banners to be shown on the screen only. |
| print.css. This means when a web browser requests | | | | Your screen.css stylesheet could contain all kinds of |
| your web page screen.css kicks in for your screen | | | | attributes for the advertisment such as border |
| display. When a request is made for a print preview | | | | colour, drop shadows and position. |
| or print the style is defined by print.css. | | | | In your print.css stylesheet you would want to omit |
| This is not an automatic process and we will have to | | | | the advertisement from printing so in you would |
| write a new style sheet called print.css that works in | | | | place the following: |
| accordance with your original html document. | | | | #div. |
| In the next section we look at the CSS involved in | | | | |