Grow your CSS skills. Land your dream job.

#52: Building a Print Stylesheet

My technique for building print stylesheets goes like this. 1) Start from scratch 2) Leave most defaults alone 2) Eliminate every thing on the page you don't need with display: none; 4) Put page-breaks where appropriate. Of course, I spend far too long explaining all this, but you get to see it being built live on CSS-Tricks.

Links from Video:

Comments

  1. Permalink to comment#

    One of the things that we did for our department website was hide the URL and have it show when you print it. Yeah, you can normally see it in the corner when you print, sometimes people turn it off and it’s there in case someone wants to refer to it later.

  2. Chris
    Permalink to comment#

    OK, I’m seven minutes into this and you haven’t started providing ANY information yet about the print style sheet yet. What a waste of time!

    • Yeah I figured there would be some complaining about that. Hey — it’s free and the video player has the ability to skip ahead.

      I’ve found that I just like to talk about everything that I’m thinking and share stuff about my life and what I’m doing. As much as I try to “get down to business”, rambling is gonna happen.

    • Snookerman
      Permalink to comment#

      Chris don’t mind emm.. the other Chris, this is one of the most useful screencasts on this site. Before, I didn’t even think about this stuff, but now I will. You had many nice tricks there, thanks!

      Here’s a suggestion, could you maybe take out the most important tricks you talk about in a video (e.g. in this one: the url in brackets, the page break, the thanks for printing message, etc.) and put them under the video or somewhere. I learn a lot of tricks from these screencasts and every time I need to go back and find one, I need to wait for the video to load and then try to find the part I’m looking for (sometimes I rewatch entire videos because I can’t find what I’m looking for). It would be much easier if you had a section, say “tricks you learned”, that contains all the important “tricky” stuff. Just a suggestion, would be awesome if you gave it a thought, thanks for your tricks!

    • Permalink to comment#

      Hey — it’s free and the video player
      has the ability to skip ahead
      .

    • Permalink to comment#

      Yeah – this article gave me tips I’ve never heard before! Thanks Chris!

    • I would like to do more detailed show notes, it’s just a time issue. In the case of this video, the direct link to the print stylesheet should be everything you need.

    • Rodney
      Permalink to comment#

      Everyone’s a critic.
      I WAS skipping through your video, but will watch it in full later.
      One of the things I like about is the calm and relaxed manner you use to explain the subject and more.
      Keep up the good work.

    • I can’t believe what I’m reading above. The content is FREE people! If you don’t like it for whatever reason, don’t watch. It’s that simple! I come here because I’m pretty wet behind the ears in web design/development and I love to hear the thought process that goes into what Chris is doing.

      If you’re not satisfied, I know a few subscription sites that would love to have you sign up.

      @Chris (The real one) Keep doing you man! I can’t thank you enough.

  3. Al
    Permalink to comment#

    ramle all you like, I can fast forwrd if I wish.

    I appreciate these video casts that you do and those done on other sites, lots of good free information is passed on to all of us the viewers. I especially like the fact that you do not know everything and that you can question what you are doing at tims, it is very down to earth for a technical expert (??) to do this. keep up the good work and I will view any and all video casts that interest me or that I can understand, not all do, but thanks for the major effort involved in creating these videos.

    Al

  4. Permalink to comment#

    Thanks for another great screencast Chris!

  5. Mike
    Permalink to comment#

    Good vid. I always put off making print stylesheets because I believed they were too much hassle. I stand corrected!

    I quite enjoy the rambling, it’s nice to know that I’m not the only one who has disasters.

  6. Nice tutorial. 90% of all sites don’t have CSS print layout.Printing with CSS is very easy.

    I build one CSS Framework Hartija who will cover 85% of your printing needs.

  7. Mike Madison
    Permalink to comment#

    Hey Chris i noticed that on ur mac, your dock is kinda separated by the program. is that a program or how did u do it?

  8. Snookerman
    Permalink to comment#

    Chris, I just realized something. If you have Web developer (I’m sure you do) you can go to CSS and then display css by media type. That way you don’t have to print to pdf all the time.

  9. Hello.

    I started visiting csstricks.com only a couple of weeks ago (although I’ve been doing Web Design for a long time now), and I find the site very interesting and educative. I never close the csstricks.com tab in my Firefox :).

    However, I started watching the screencast but I didn’t finish it.

    I have to say I comply with ‘Chris’ in the second post.

    These are the reasons I didn’t want to finish watching the video:

    Too long. Many of us are at work and we may not have 30+ ‘free’ minutes to watch a video tutorial of this nature. Yes, we can skip and forward the player, but there’s no way to follow the secuence of the video when you might skip something important. That’s actually what you DON’T want the users to do, to skip parts of the video… right? If that’s the case, then Chris, you are the one wasting your time, see what I mean? Why would you want to create a video knowing that people will skip it through?…
    Too much irrelevant content and comments. We understand you are trying to be spontaneous, but Chris, at least talk about the subject. Honestly, and with all respect, we don’t really care if you backed up your applications or not, know what I mean? :) We came to this page to learn more info about creating print style sheets, that’s all we want. Please, respect our time just as we appreciate all the information we get from you.
    I don’t see you have prepared a script. Again, we understand you are trying to be spontaneous, but if you minimize the errors/trouble-shoots during your tutorial, then we’d have a much better experience watching the videos. Seeing you troubleshoot something, throws us off from learning what the video is actually trying to teach.

    I hope these comments are Ok with you and take the best out of them to improve… we all very well know there’s always room to improve in everything we do.

    Thanks,

    Ricardo Zea.

    • Permalink to comment#

      @Ricardo I think you may be being a little over critical here. It’s not the point that Chris didn’t back up or hasn’t been able to re-load all of his apps. This point is that he is a real designer who decided to share a real issue…as a fellow design professional I can definitely relate to Chris’ most recent issue and am glad he shared how he resolved it. I for one was happy to hear about the relationship between Time Machine and Drobo…both very useful products to be aware of.

      The point here is that you ever know from where useful information is going to come. Chris uses a variety of different programs and product that (especially to those new to all of this stuff) are helpful to know about.

  10. Permalink to comment#

    Thanks for the great screencast. I just made a print stylesheet for one of my many blogs and it now looks so much better in print.

    I also second snookerman’s suggestion to have the key tricks in text below the screencast.

  11. stefan24
    Permalink to comment#

    The debate to include personal comments or not in the screen cast is valid, but personally i like them if you want to have pure technical videos with no comments, subscribe and pay for lynda.com or vtc.

    I like the format, plus seeing mistakes and how to solve them is great, a lot of video tutorials are planned out way too much and everything works first time, things usually don’t work like this in reality and I’m glad the screen casts reflect this.

    As ever there is two sides to every story, and I think in this case you should know when you’ve got a good thing going on, thank you for your screen casts! They have come in really useful when I’ve got a new technology to implement and a client waiting to see results. 7 minutes of related comments is a really small price to pay, and the issue of choosing to back up your applications is useful one as I was going to switch that off in time machine now I’m thinking twice about it.

  12. Permalink to comment#

    @stefan24: I agree with you, this man is giving away knowledge for free and they are making bad comments about him…

    All of his screen casts are great.

  13. Nathan
    Permalink to comment#

    First of all, great screencast. Thanks for all the info = ]

    Haha, and oh boy. You’d have to wonder where some people get off. According to some, all that “we” do is come to CSS-Tricks to robot in, download the latest information, then robot out. In reality, or for at least 16 of the 18-or-so people who have commented positively on this video, “we” come here to learn and interact, which is why we appreciate every screencast to the full regardless of any lack of preparation, exhausted excessive rambling, pauses for personal details or momentary f#ck ups. A new screencast each week… for a personal site… when the author has so much else on their schedule… we should be rejoicing. Oh yeah, and I almost forgot, it is bloody free. Who woulda thunked it?

  14. Permalink to comment#

    Why would you not make this one as a written post instead? It would’ve been ten times more useful.

    Video content is also content, but having it as text makes it so much easier to use since you can print it out and use it to make notes on projects/etc.

    The video is good, although you should’ve prepared what to say, and go directly at it (the problem/task).

  15. Permalink to comment#

    @Ricardo I think you may be being a little over critical here. It’s not the point that Chris didn’t back up or hasn’t been able to re-load all of his apps. This point is that he is a real designer who decided to share a real issue…as a fellow design professional I can definitely relate to Chris’ most recent issue and am glad he shared how he resolved it. I for one was happy to hear about the relationship between Time Machine and Drobo…both very useful products to be aware of.

    The point here is that you ever know from where useful information is going to come. Chris uses a variety of different programs and product that (especially to those new to all of this stuff) are helpful to know about.

    • Permalink to comment#

      Hello CJ, thanks for your input.

      However, I was actually trying to be more ‘mature’ by leaving a detailed explanation of why I didn’t finish seeing the screencast, instead of just “I started watching the screencast but I didn’t finish it.“… but instead you think it’s over critical. Sigh…

      Anyway, I still think that it’s irrelevant the content about not backing up and all that other stuff he mentions, I don’t have the time to digest information that’s unnecessary, I am a very busy Web Designer as well, it’d be more productive for me to see exactly what the author is teaching.

      As the author (and as you as well), I’ve had problems backing up information or applications, and I do relate to his problem too, but it’s not relevant to the subject.

      especially to those new to all of this stuff“–> If someone is searching for a video on how to backup his/her applications it doesn’t make sense to look for the screencast of “Building a Print Stylesheet”. At least I wouldn’t =]

      Although I did not like this screencast at all, I do enjoy A LOT going around the site reading very cool information (did I say I’m new around here? =]). Next time I’ll just STFU and go on ><.

      Don’t confuse “robot in and robot out” with Efficiency. I understand, it’s a thin line hard to see =]

      And I agree with koew as well, a written version (ehem!scriptehm!) could be another way to have the information available offline.

      @Matt: You are right, a[title=”edit comment”] does not work in IE6 it does work in IE7 though =]

      Later!, off to see more SM Q and A.

      Bytes.

  16. Matt
    Permalink to comment#

    Hey great screencast! a few good things in there that i never considered when creating a print stylesheet.

    One thing to point out, i dont think it has been mentioned and i could be wrong but using attributes to select elements e.g.:

    a[title=”edit comment”] {display: none }

    does not work for IE users. I know thats not a reason NOT to use them, but its just something to keep in mind if you are using attributes to select elements in CSS.

  17. dot tilde dot
    Permalink to comment#

    oh gosh, chris. i love your screencasts just as much as i hate the introduction music.

    but seriously: great stuff once again – the topics very often fit my work schedule. :-)

    all the best and thank you for so many episodes that really helped me,

    .~.

  18. Permalink to comment#

    Hey a little off topic but I noticed that you have a Drobo. Would bee cool if you could do a product review on that. As I’m writing that you are making mention of it. But, I have lost my files many times and I’m looking to for something a little more advanced than a raid drive setup.

  19. linhland7
    Permalink to comment#

    hi can you give us a summany of this video, because some of us come from a country that have bad internet connect so i cant watch the video ;(
    thanks

  20. Matt
    Permalink to comment#

    Ignore the moaners, Chris – I struggled to find a DECENT, easy to understand breakdown of how to build a basic website in CSS; you cracked it mate!. Thanks SO SO much!! :-D

  21. Solid information! Thx

  22. shaya

    Is something wrong with the video download? I am getting wierd errors in both Firefox and Chrome.

  23. I really want to download the video, but it comes appearing as a garbled text file.

    • You may want to try making sure it has the file extension .m4v – just rename if you need. And always try viewing in VLC player, that can read just about anything on lots of different operating systems.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".