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

Creating print-specific styles

From: Managing CSS in Dreamweaver

Video: Creating print-specific styles

One of the really cool things that CSS allows us to do is design for a specific environment. In our previous movie, we wrote some basic styles that control how our site looks when it prints. We can take that even further by writing styles that are specific to the printed environment itself. CSS properties like page-break allow us to write styles that target that environment and give us even more control over how our style prints. So, I have the resources.htm file open from the 04_02 folder.

Creating print-specific styles

One of the really cool things that CSS allows us to do is design for a specific environment. In our previous movie, we wrote some basic styles that control how our site looks when it prints. We can take that even further by writing styles that are specific to the printed environment itself. CSS properties like page-break allow us to write styles that target that environment and give us even more control over how our style prints. So, I have the resources.htm file open from the 04_02 folder.

Now, if I take a look at our print style sheet, I can see that the style sheet that we started in the previous movie, really the only thing that's been done is some of the additional elements on the page have been styled, just so that we have more of a finished product to work with here. All right, so I'm going to preview this page in our browser, and I'm going to go to my print preview, so that I can kind of see how the printed page looks. It's looking pretty good, but there's a problem. It might be a minor problem, but it still looks like a problem for me. Trip planning is fine, but look at Tour checklist. Look how that's breaking.

It's always kind of annoyed me when I print out some of these Web sites, and I get half of the information on one page, and half of it on another page, and it really kind of gets jumbled up. So, I want to force page-breaks, and that's really easy to do by using the page-break-before or the page-break-after property. So let's go ahead and write a couple of styles that we can use to control specific elements and whether they need a page-break-before or after them. It's probably easier just to do this in code, so I'm going to select the print.css, switch over to code view, and I'm going to go all the way down to the bottom, and at the bottom of the page, I'm going to type in .pb.

Now, because it's a class, it has to start with a period, dash before, and I'm going to go ahead and open up a curly brace and in the line below that, I'm going to type, page-break. Now, notice that we have page- break-after, page-break-before, and page-break-inside. I'm going to go ahead and do page-break- before, which would insert a page-break directly before the affected element. And I'm just going to go ahead and type in always. Notice that we can also have avoid, auto, all those types of things. That actually leads some very interesting settings.

You could take a heading, for example, and do a page-break-auto, and if the heading was a little long, and was forcing page-break, your browser would go ahead and insert the page-break itself. I've had mixed results with doing that sort of thing. Sometimes, it works really well. Sometimes browsers don't pick up on it. So, I actually prefer to control mine manually. Now, I am going to go down the next page. I'm going to type in .pb-after, and once again, I'm going to do page- break, and this time, we're going to do a page-break-after.

In this case, I'm going to do always as well. So, I'm going to do always for both of them. Now the reason I like controlling these manually is it's just a little bit easier for me to do a print preview, find a page and say, yeah, that needs a page-break. Now, on larger sites, or sites where you have a lot of dynamic content being generated, that's not always possible. So, sometimes you can set up these guys to automatically do a page-break if they need it. So, you could maybe make that part of your paragraph style; A page-break-before: auto, and it would just go ahead and assign one wherever needed. I'm going to do a Save All. Now, we need to go apply these classes.

I'm going to go back to my design environment. I'm going to scroll down a little bit, and remember, Trip planning was okay, but Tour checklist was the one that really needed the page-break. So, I'm going to select Tour checklist, click on the h3, and in my HTML properties, I'm going to go ahead and go pulldown menu, and I'm going to choose pb-before, so that there's a page- break before the Tour checklist. Now, that class only applies to your print style sheet, but it is part of your HTML now. I can do a Save All. Notice that if I go back, right here, and render my screen media type - so this is my Style Rendering toolbar, notice that still visually no different whatsoever. So this is only going to affect the printed environment.

We're going to go ahead and preview that in the browser again. I'm going to go ahead and do a print preview. Now, sure enough, notice that Trip planning is right there, but Tour checklist is now breaking down to the next page. So, that is a much nicer presentation of that. We get to control that within the printed environment, which is really, really cool. All right. Let's go ahead and take a look at some of the other things that we can do for the printed page that isn't necessarily a print-only property. CSS can do a lot of things. One of really cool things it can do is it can generate content. You can basically tell a browser, or any type of device that when you experience this particular element, go ahead and generate this content after it.

As you can imagine, there are some incredible usage for that. Now, you'll notice that on the page, I have a sentence here that says, for more information on traveling to California, check here. Now, on the printed page, what is check here referring to? That doesn't make any sense, and if I look at that with the screen styles turned on, well, that's pretty obvious; it's a link. So, checking here would click to take you to a Web site, but when you're looking at your print style sheet, not only is that not obvious; you have no idea where to check. So, what we're going to do is we're going to write a pretty advanced selector that allows you to generate content after any external link, so that people that print your page out will have that Web address later on.

All right, so let's take a look at how we can do that. I'm going to switch back to code view, again, focusing on the print.css Scroll all the way down to the bottom, and I'm going to add a selector right down here at the bottom. Now, this is going to be an attribute selector. Now, I'm sure some of you have done attribute selectors before, but for those of you that have not, attribute selectors allow you to basically say, okay, I want to style this particular element when it has this attribute. You can be as specific as you want. You can just say if it has the attribute, you can say, if its attribute is this value, or you can do what we're going to do, which is to say, if it has an attribute that contains at least this particular string of characters.

So, what I'm going to do is I'm going to type in a, for link, and then open up a bracket. That bracket indicates that this is an attribute selector. Now, for that, I'm going to type in href, and then close my bracket. We're going to add more to this, but I want to explain this piece-by-piece for those of you that maybe haven't dealt with attribute selectors before in the past. This selector would target any link with an HREF attribute. So, any link that actually goes someplace, to a local page or to a remote page, whatever, this would apply to that. Now, let's get a little bit more specific with this.

After the HREF, what I want you to do is type in ^=. That's a special character, obviously. It's basically saying if it contains the following. Now, after the equals, type in a quotation mark, type in http://, and then close your quotation mark. Okay, so what is that saying? Well, it's now saying, find any link with an HREF attribute that contains http://. The only time that condition is going to be met is when we're dealing with an external link, a link that goes away from our site.

If you think about it, that makes sense. What we're going to be doing here is displaying the link, so that people that print this out know where to go later on. Well, they don't need to know that you're going to click to go on the Contact page, or you're going to click to go to the Index page. That really doesn't make a whole lot of sense to show them that. But if you're navigating away from the site, that's going to be a resource they're going to want to know about. Okay, now let's go write the rest of the selector. Right after the bracket, type in :after. So now, what we're doing is we're using a pseudo-selector. Now, most you are probably familiar with pseudo-selectors, at least the Link, Hover, Visited, Active, maybe even the Focus one, that sort of thing, but after is one that you may or may not have used before.

After is essentially saying, once you find this, directly after it is what I want you to do. So, this pseudo-selector is basically saying, after the element that you find, let's do something. Okay, I'm going to go ahead and open up my curly brace, hit Enter and go down the next line. Here, I'm going to type in the property content. The content property allows you to generate content on the page. So, essentially, what we're saying is after you find the absolute link, we want to generate some content. Let's take a look at the content that we want to generate. I'm going to type in space, and then a quotation mark, and then another space, and that's going to give us a little bit of space between the link and this content.

Now, I'm going to type in a parenthesis. I'm going to type in online at, and then a colon. What's interesting about this is because we opened up a quotation mark, this is a literal string. That means that this content is going to be displayed on the page. So, these strings of characters, such as a literal string, Dreamweaver doesn't really care what it is. The browsers don't really care what it is. They're going to place that directly after any link that's an absolute link. Now, I'm going to go ahead and close my quotation marks, because here I need to go grab a value. Check this out. I'm going to type in attr, and then in parentheses, href, close my parenthesis, close quotations marks.

Now, what is that doing? Well, essentially, we're doing concatenation. Concatenation is just another way of saying we're joining a couple of things together. So, what we're doing is we're taking these literal strings, the text "online at," and then directly after that, we're going to place an attribute. We're going to place the HREF attribute. So, it's basically saying, hey, go get the contents of this HREF attribute and place it right here. So, it's going to say, online at, then whatever the link would be. Now, we still need to finish something here. Remember, we have parentheses around this, so I'm going to go ahead and close the parentheses and close the quotation marks.

Type in a semicolon, and then we're done with that rule. That is a really complex selector. Let's take a small second to go over it one more time. So, we're saying anytime you find a link with an HREF attribute that contains http://, so any external link, after that selector, we want you to generate some content, and we want you to generate the text saying, online at, and then go grab that HREF attribute, place that there, and close your parenthesis out.

Let's Save this, and we'll just see if it works. I want to preview this in our browser. I'll do another print preview. If I scroll down, you can see, right here, for more information on traveling to California, check here (online at: http://www.visitcalifornia.com). Cool! So, it's pulling the information we want, it's formatting it the way we asked it to, and our print style sheet is a lot more robust now. It's allowing us to control exactly how our content is presented on the printed page.

We can determine which elements print, how they look, and even have a granular level of control over how our pages behave. Now, the best part about all of this is that print style sheets really don't take that long to create. They add an amazing amount of value for your site's users. My advice is to go ahead and create your print style sheets at the same time you're writing your other styles. This is going to ensure they get finished along with the rest of the site, as well as making it easier to apply print -specific styling to individual pages.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20809 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.