Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Setting Separate Styles for Screen & Print

  • We are going to take a look at CSS Media Types to set up a separate style sheet for our web pages specifically for printing
  • It is possible to control the output to a specific media device such as a printer, this is a part of the CSS2 specification so it has been available for a long time and is very well supported
  • The idea behind this concept is to make sure that web pages are designed for printing
  • It is possible to create a separate style sheet to use when the document is printed and this is fairly simple, just add another style sheet to the page, adding the media of print to the code
  • Always take a look at how the web page would look if printed using Print Preview in the browser to determine if or what you want to modify for printing before creating rules for print
  • You can hide or move page content to be sure it fits onto the web page when the page is printed
  • We will hide the navigation bar when the page is printed
    • To do this, we will add an empty style sheet called styles-print.css that is located within the course files for this chapter
    • To add a stylesheet to the page using the Sources panel in CSS Designer and browse to styles-print.css within the site files
    • Open the Conditional Usage area, choose media and select print from the second drop down menu
    • We can now add rules to the print style sheet that will only apply if the web page is being sent to a print device
  • Be sure to preview any print rules you add to the print version of the style sheet within Print Preview in the browser to be sure it looks the way you want it to when being printed

Setting Separate Styles for Screen & Print

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Screen and Print Style Sheets 0:22
    • Deleting Style Sheet
    • Attach Existing Style File
    • Conditional Usage
    • Preview in Firefox
  • Hiding Navigation in Print 4:07
    • Select Styles Print
    • Main Links
    • Display None
    • Visibility Hidden
  • Site Templates 7:14
    • Blank Page
    • CSS Layout