Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you've prepared a ASP.NET page for printing by replacing any of the ASP.NET controls style properties with references to actual CSS classes, the next step is to create links to additional style sheet files. The link element, which is the part of the HTML language, you use the link HTML element to link an HTML page to an external style sheet. For this demonstration I'm working in the file Printformat.aspx. In this file the GridView control has its styles already replaced with CSS class declarations, and these CSS class declarations are referring to classes that are actually defined in the external style sheet file, Styles.css. And the link element within the head section of the page is where that join happens.
Here's the first step, I'm going to press Alt+Shift+Enter to go into Full Screen, so I can see as much code as possible. Then I'll go to the existing link tag and I'll add a new attribute called media and I'll set it to a value of screen. This is a standard attribute that all modern web browsers recognize. When a web browser opens an HTML page and it sees a link element with the media set to screen, it recognizes that; that means that this style sheet should only be used for rendering on a standard computer screen.
Then I'm going to create another link element. I already have a file in place called PrintStyles.css. It repeats the same CSS classes, reportHeader, reportRow and alternatingRow, but gives them completely different values and also designates a different standard font family up at the top in the body table selector. Instead of Ariel, we'll be using Times New Roman. So I'll go back to the page and I'm going to make a copy of this link element. I'll select those lines, press Ctrl+C to copy, place the cursor right below the link element and press Ctrl+V to paste. Then I'll make two changes to the new version of the link. I'll change the href attribute printstyles.css and I'll change the media from screen to print.
Notice all the available options for the media attribute, in addition to screen and print there is also handheld which is used by cell phones and other small devices, projection, Braille, aural and so on. So there are my two style sheet declarations. I'll save the change and run the page by pressing Ctrl+F5. When the page first appears, it looks exactly the same as it did before, because it's now using the screen style sheet. But then I'll use my browser as to Print Preview capability. In the Internet Explorer you can get to this by right- clicking on the page and selecting Print Preview and then I'll expand the page and you will see that I'm using the Times font now, and all of the text looks quite a bit different then it did on the screen. Once you have created this extra style sheet link you can then customize the look of your report using whatever CSS styles you know how to use.
But the technique of using multiple style sheets is a critical element, when you want to prepare a page so that it looks different on the printer than it did on the screen.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96413 Viewers
56 Video lessons · 110153 Viewers
71 Video lessons · 78943 Viewers
131 Video lessons · 37879 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.