Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Instructor] His this is Chris Converse and in this episode, we'll use CSS to display the URLs of Hyperlinks when a webpage is printed. So if you'd like to follow along, download the exercise files and we'll begin by opening the html file in a text editor. And so when you have the html file open, up in the head area, we have a link to style.css. We'll be opening this in a moment. And in the body area, we have an article element. And then inside of the article element is an h1 and a few paragraph elements. Inside of the first paragraph element is an anchor tag.
And in the third paragraph element is another anchor link that's styled to look like a button. And so what we're going to be doing is displaying the href value, or the URL, for each one of the links when a webpage is printed. So to do this, lets go back to the exercise files and lets open this style.css file in our text editor. And now inside of this css file, if we scroll down, after the a.btn rule you'll see that we have a media quarry in here targeting print. And so before we put our rules inside of the media quarry for print, lets put them outside of the media quarry so that we can see them in the browser.
And so the first thing we'll do is use a sudo element to display the hyperlink in the page. So we'll do that by typing in a, than two colons, than the word after. Then put in our brackets, we'll split this open. And now the first property we'll add will be content, so we'll type content colon space Next we're going to put two quotes. Inside of the quotes we'll hit a space and than a beginning parenthesis. Then outside of the quotes we'll hit a space, then we'll type attr for attribute, beginning and ending parenthesis.
Inside of the parenthesis we're going to put href, so h r e f. Then outside of the parenthesis we'll hit a space, two more quotes, semicolon and then inside of the second set of quotes we'll put an ending parenthesis and a space. So with this in place, we can hit save. Go back to the browser and hit reload. And we'll now see the href showing in both places. We'll see it in the paragraph element and we'll also see it down here in our button. So now lets go back to our css. Lets add some additional styling. So after the content property, lets come in here and set a font style.
So font dash style colon space. We'll set this to italic. Next we'll add a padding property. We're going to set the top to zero. We're going to set the right to 12 pixels. We're going to set the bottom to zero. And then five pixels for the left property. And then finally, lets come in here and add some letter spacing. We're going to set this to one pixel just to make this a little easier to read from a piece of paper. And so with those properties in place, lets hit save. Back to the browser and hit reload.
We can see our styling taking effect. And now for the button down here, I want to have the URL show up on its own line. So lets go back to our css. Lets add another rule that will target this sudo element inside of the anchor tag with a class of btn. So a.btn, two colons, then after. Put in our brackets. Lets come in here and set a display type to block. That will force the URL to be on it's own line. And then finally, lets get rid of the padding left.
So we'll set padding left to zero. And so with these in place, save your css. Go back to the browser and hit reload. We'll now see the URL is on its own line and the padding left is set to zero. And now back in the css, the last thing we need to do is come in here and cut these two rules that we just created So I'll cut those to the clipboard. Lets scroll down. Inside of the media print, media quarry. Lets come in here after the a.btn and lets paste in those two new rules.
I'll format these a little bit. We'll hit save. Go back to the browser and hit reload. The URLs are no longer showing. And then if we go up to the file menu and come down and choose print, we'll now only see the URLs when we print the page. Now if you'd like to learn more about setting up css styles for print, check out chapter seven of the course, Creating a Responsive Web Design. Which is also available here in the library. And so with that, I'll conclude this episode. And as always thanks for watching,
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.