Please help me to understand linked style-sheets?

Discussion in 'CSS' started by DiNASTY, Aug 3, 2006.

  1. #1
    Hi,

    I'm new to CSS and I have a general question about css and linked .css files. I understand that one of the major benefits of CSS is that you can very easily alter the contents of your html page by changing a few lines of code in the css file.

    I would like to know how you are to change this information on the fly or when a user clicks on a link. For example, I would like to have a "Printer Friendly" link that changes the entire page - however without leaving the page (just changing the linked css file). Is this possible? Moreover, is it possible to then take it a step further and add links to change font size on the printer friendly version? (This would require the creation of new links in on the printer friendly style sheets) Is this also possible.

    I hope I'm making sense. Thanks very much for reading,

    -DiNASTY
     
    DiNASTY, Aug 3, 2006 IP
  2. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #2
    First off we have a media descriptors tag: http://www.w3.org/TR/html4/types.html#h-6.13

    For a computer screen we'd have the linked stylesheet
    
    <link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css"/>
    Code (markup):
    For print we'd attach a different stylesheet and use:

    
    <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/>
    Code (markup):
    So whenever someone prints out the document, it would use those settings instead (such as print settings).

    To switch the styles on the fly, for a print friendly version (most will just use print preview), you need JavaScript - this is a well scripted one, with a tutorial to boot:

    http://www.alistapart.com/articles/bodyswitchers/
     
    AdamSee, Aug 3, 2006 IP
    dct likes this.