Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.