Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Writing a print style sheet

From: Managing CSS in Dreamweaver

Video: Writing a print style sheet

As Web designers, we are likely to get caught up and writing styles for the screen without taking into consideration that there are many other devices such as printers that are likely to consume your content. If your site is not equipped with printer styles, pages will be printed as unstyled content, or by using your site's default styles. Now, the good news is that writing print style sheets is incredibly easy to do and gives us the ability to create an entirely new look and feel for our site, designed specifically for the printed page. So I have the resources.htm file open in the 04_01, and I'm just going to preview this really quickly in our browser.

Writing a print style sheet

As Web designers, we are likely to get caught up and writing styles for the screen without taking into consideration that there are many other devices such as printers that are likely to consume your content. If your site is not equipped with printer styles, pages will be printed as unstyled content, or by using your site's default styles. Now, the good news is that writing print style sheets is incredibly easy to do and gives us the ability to create an entirely new look and feel for our site, designed specifically for the printed page. So I have the resources.htm file open in the 04_01, and I'm just going to preview this really quickly in our browser.

So I'm going to preview that in Firefox, and I'm going to go up and do a Print Preview. So on the Mac, you could go ahead and do Print and then click the Preview button. And now we get to see what this page would look printed out. So we have a nice, big headline that shouts Welcome to Explore California, an unordered list that doesn't mean anything on the printed pages, an image, boy, that looks horrible. Look at that. The page breaks are happening poorly. There's some really bad stuff going on here. Our sidebar information is printed. Now, some of the things that people might want such as the address here is printing out just all by itself.

So not really what you would want in terms of user experience, or in terms of passing brand from one medium to the other. So I'm going to close that, close my browser. Let's go back into our Resources page and begin to create our print style sheet. So what I'm going to do is open up my CSS Styles panel, and with that open, I'm going to go over to the New CSS Rule, that little icon right there. Click on that. And the first thing we're going to do is a compound selector. We're just going to go ahead and basically tell certain elements not to print.

There are certain things we don't need to print. The navigation doesn't need to print. You cann't navigate using the print document. The sidebar information probably doesn't need to print. The footer information doesn't need to print, the header information. So we're just going to go ahead, and do the following selectors. So type in #header, #mainNav, #sidebar, #footer. Okay, so we're going to define that, not in main.css, but in a brand-new style sheet file. So this is kind of an interesting technique because here, we're going to create a brand-new CSS rule, put it in an external style sheet and link the external style sheet to this page, all in one step.

So that's pretty cool. I'm going to go ahead and click OK, and I'm going to save our brand-new external style sheet in the _css directory, and I'm just going to call it print.css, perfect. I'm going to go ahead and save that. Now our CSS Rule Definition dialog box comes up. So it went ahead and created the style sheet for us, linked it to the page, and now we're free to go ahead and place styles inside of it, which is really cool. Now, I'm going to go to the Block category, and the first thing that I want to tell this is to display none. I don't want these to print out at all. So display none, I'm going to go ahead and click OK and do a Save All.

Now, I wasn't going to say well, look, nothing on the page changed, but nothing could be further from the truth; a lot of stuff changed. So what happened here? Well, if I look over at my CSS Styles panel, and I'm just going to roll the Files panel down a little bit here, you can see that the print.css style sheet looks very different up here from the main.css. Let me collapse those so you can see them together. Notice main.css says hey, I'm only affecting screen of projection but print, it's mum on that issue entirely. So if a style sheet does not have a media type assigned to it, it goes ahead and applies to all media types, which in this case is causing us some big problems here onscreen.

So we need to tell the print style sheet that indeed it only affects the printed page. You'll notice we didn't get that prompt when we created the style sheet that way. That's for me one of the drawbacks of using that, but it's easy enough to put in ourselves, and we'll just switch over to code and do it very quickly. So I'm going to switch over to Code View and in Code View, I want to find Line #7, that's where my print style sheet has attached itself. At the very end of that, I'm going to add media="print", and you can just go ahead and let code hinting help you out with that. Just make sure that you have the self closing tag done right, space forward slash and that there'll be end of the tag.

So I'll go ahead and save that and switch back into Design View. Now what's really interesting here in Design View, we get our page back, yay, right? Everything is showing up again. And over here, it says print.css, and this says print. Now, I want to introduce you to a toolbar that you may have seen. I know we've talked about a little bit earlier, but you may have never used it, and it's this toolbar right here. This is the Style Rendering toolbar. If you don't see it, you can go up to View, choose toolbars, and you want the Style Rendering toolbar. You can also right-click the Document toolbar and choose it that way.

Now, this toolbar can float unless you are on a Mac, in which case it's always going to remain docked with the Document toolbar. I like it being there as well, and so I'm using to have it docked somewhere on the Document toolbar, usually on the right-hand side, but left-hand is fine, too. It's not really hurting anything. And what I'm going to do now is going to make designing our print style sheet a lot easier for us. So what I'm going to do is go over to the Style Rendering toolbar, and I'm going to tell it to render the Print Media Type. As soon as I do that, notice that the page entirely changes, and now we're seeing a preview of what the printed page is going to look like.

This is really cool. This means that we can start designing inside of our print style sheet, adding selectors to it, and we'll see the changes here directly in our screen, which is really neat. Now let's add a few more selectors to our print style sheet. So I'm going to go over to my CSS Styles panel and click on the selector that I have here already. And I'm going to go ahead and create a brand-new CSS Rule. Now for this one, again, I'm going to go down to Compound because I'm going to be grouping some selectors together. I'm going to type in a.breadcrumb, that's the links at the top of the page, comma a.top,ul.faqNav so faqNav.

So three other elements: breadcrumbs, links at the top of the page and any unordered list that is part of the faq.navigation, so those were actually links that you could click on to jump further down the page. I'm going to make sure that they're being defined in the print.css. I'm going to go ahead and click OK, and I'm going to go to the Block category and once again, I'm going to tell it to display none. So while I think they are great, I certainly don't need to see them in the printed page. So I'm going to go ahead and Save All. If you're working on your print styles, you don't have to create all of them within the CSS Styles panel.

I'm going to go ahead and collapse the CSS Styles panel down to Icons, switch to a Split View and click on the print.css. So I'm actually working on the print style sheet. So again, I can see the Design View to the right of me. It's showing my print styles, and on the left-hand side, I get my code. Cool! Let's do a couple of more styles here. Let's type in #wrapper and put up curly brace, hit Return to go down to the next line, and here we're going to just type in width and then 6.5in, for inches. Now that, my friends, is interesting, is it not? Let's go ahead and close our curly brace.

Now every single medium you design for is different, and I've had plenty of students asked me before, why in the world you can use inches in CSS? It doesn't translate to the screen at all. No, but it translates to the printed page. So when you're doing a print style sheet, it's really handy to be able to use inches. I'll go down to the next line. I'll type in body, and in the body tag selector, I'm going to do a font-family, and I want to do a font- stack that I don't see here. So this is one of the cool things about working in Dreamweaver. If you want to do a font-stack that you don't already see, you can click Edit Font List, and that comes right up.

I'm actually going to check for Chaparral Pro, and after Chaparral Pro, I'm going to do Cambria. So I'm going to find Cambria. There we go. After that, I'm going to do Georgia and then a San Serif. Now, if you're wondering, these are fonts, at least the first couple of them, that are more likely to be installed on your machine. Because these styles are for the printed page, I have a little bit more freedom in working with specific types of fonts. In this case, Chaparral Pro comes with a lot of programs these days. It's installed on a lot of machines. So is Cambria.

And then finally, I have a Georgia fallback font. So these are more print friendly fonts and at the very end, I'm going to add the Serif. There we go. So if you don't like the font stacks that are in there, you can build your own. I'm going to go ahead and choose that one and click OK, and then I can scroll down and grab it, hit Return, and it finishes it for me. You don't have to do that every single time. You only have to do at once, and it will remain in there. After that, I'm going to do font-size and my font-size is going to be 12 points. Points, ya! So again, all of our graphic designers, when I tell them only when you're doing the style, print styles sheets can use points.

They get so excited because they know exactly what 12-point text is supposed to look like, right? All right, now I'm going to do a line-height here. So I'm going to do a line-height of 16 points. So now we're just going to go ahead and continue using points for the units of measurement when we deal with the print page. Let's do one more selector. Hit Enter, go down and do an h1 selector and here, we're going to do a font-size of 20 points, font-weight of normal - so I don't want it bold - and a margin-bottom of 20 points.

Again, we're working in points is quite extensively here, so there is our h1 selector. All right, so now, let's see if this looks any different. We're going to do a Save All. We're going to preview this in our browser. Now once again, we're going to do a Print Preview, and that looks a lot better. Notice the font. Again, there's Chaparral Pro font in here. Everything is looking pretty decent at least, or at least it's moving in the right direction. Let's put it that way. Now if we were satisfied with just changing the look of the printed pages, all we would really need to do is continue to style a couple of these individual elements here and there; however, there are some styles that are specific to print styles, and they can only be used with the printer, and they give us a pretty powerful functionality.

In our next movie, we're going to explore some of those print-specific styles and a few other techniques that can make our print style sheets even more powerful.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20851 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Managing CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.