I.T. Discussion Community!
-Collapse +Expand
Search Design Group:

-Collapse +Expand Design Store

Prestwood eMagazine

June Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite DesignCascading St...   Print This     
  From the November 2015 Issue of Prestwood eMag
Design Cascading Style Sheets (CSS):
View. Print. Handheld. Make your site work on any media.
Posted 9 years ago on 1/15/2009
Take Away:

There is no need to manually control the rendering of your site to alter layout. There is an easy CSS based feature that can be used to format your entire site for whatever options you need.

In this article we will see how to make the same site render automatically for screen, print, and handheld. There are other media types that can be used, but these will be the most common for daily use.


Wouldn't it be great if you could just alter the stylesheet for your site to adjust it slightly for printing or handheld devices? Then you could just create a single site, and use a modified stylesheet based on the media the site is being viewed on. Well, wishes do come true... observe!

<link href = "mysite.css" rel="stylesheet" type="text/css" media="screen" />
<link href = "mysite.print.css" rel="stylesheet" type="text/css" media="print"/>
<link href = "mysite.pda.css" rel="stylesheet" type="text/css" media="handheld"/>

All 3 lines (or ones like them) are placed in the <head> section of the master page, or in every html page if you are not using a master page. Note the normal html link to the stylesheet, with the addition of the media parameter. These media types are pre-defined and can be selected from a dropdown in Visual Web Developer. The current list of supported types is here.

Now we can load a different stylesheet based on our needs! The next thing to do is to make a copy of our existing full stylesheet. If you do a lot of in-page formatting, you are going to rue the day you decided to do that.

Making the Menu Disappear

To make any div simply cease to exist on a printed page, simply do this in the printer version of the stylesheet:


The display:none; means that this div or td (tablecell) will not be rendered when the browser is rendering to that media type - print in this case. so our entire graybar object is hidden.needless to say, your layout can be dramatically altered for smaller handheld displays.

The most brilliant thing is that the browser manages all this. So you never have to do anything conditional in your code that eats processor power. For instance, you don't have to have a "printer-friendly" version, the print engine will automatically choose the stylesheet intended for paper printouts. What's really cool is that you needn't worry what happens if you have a printer-friendly version of your site and people start navigating around - or linking to the version not intended for screen.

Layout for paper

OK, in word processors we taught ourselves to think in "points". then we started doing websites, and points make it all unmanageable, we opt instead for "pixels". But now we're actually designing websites for a paper media, so in the copy of the stylesheet, wherever you see the letters px, it's a good idea to re-arrange your thinking back into points. It can be a lot of work but you'll thank me later.


Share a thought or comment...
Comment 1 of 1

Rather than utilizing labels to apply designing, we make template principles and after that predicament them to labels containing the substance. The measure of arranging is relatively to the quantity of designing labels.

Posted 9 months ago
Write a Comment...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.

Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1226A1
Enter key:
KB Post Contributed By Bryan Valencia:

Bryan Valencia is the author of millions of lines of code and writes for PrestwoodBoards and Visual Studio Journey on-line magazines.

Visit Profile

 KB Article #101808 Counter
Since 1/15/2009
   Contact Us!
PrestwoodBoards.com was developed and is maintainted by me. Do you have a question or suggestion? Do you see a problem? Contact me now. My goal is to build an ad-free and spam-free source of I.T. information with many contributers (ok to promote your website/company in your bio). Yes, my company Prestwood IT Solutions is mentioned in my bio which shows with every post, but you can contribute and promote your pet project too!

1,733 People Online Now!!  
Sign In to see who's online now!  Not a member? Join now. It's free!
Show more stats...

©1995-2018 PrestwoodBoards  [Security & Privacy]
Professional IT Services: Coding | Websites | Computer Tech