CSS Tips and Tricks: Add External URLs to Print Stylesheets

Key Takeaways

hey how's it going guys i wanted to make a quick video here and show you a neat trick that you can add to your css files when making your print style sheets if you don't know what a print style sheet is pretty much it is a media query but instead of being a media query for screen sizes it's a media query for what your page looks like when someone prints it out the reason that you would want something like this is if i have a test website running on my local server over here um if someone printed out this page there's a lot of information here that they wouldn't care to see uh when printed out like this navigation menu here uh this sidebar with featured posts and things like that and also anything that you might have in a footer area with you know things like this it's all would just be junk when printed out you really just want to focus uh solely on the content so whenever i print this test page here you can see that my print style sheet has removed the navigation menu here it has centered the site logo taken out this sidebar and also removed all the footer information here that was getting in the way so what i wanted to show you guys was a lot of people suggest that it's a best practice to add in the urls of links into your print style sheet and the reason that they suggest doing this is if i zoom in here if you look at this resources section that i added here to the bottom of this article then if someone printed this out and it's just on paper they may be curious as to where these links actually go and if you add the url onto the page then they'll be able to uh you know type those urls in themselves and don't have to go back to your website and refine that article again so i'm going to show you a few different ways to do this and ultimately how i ended up doing it on my website now the easiest way we can do this is to just target every anchor tag on the page that has an href attribute and the way we do that is we would just search for our anchors with and whenever i open up this brackets now it means that we're now searching for attributes and type in href so any anchor tag that has an attribute with an href and then we'll put in this after tag and we want this content after the anchors with hrefs to be and i'm just going to put hard code in a parenthesis here and then after i close off this quote then i'm going to put in attribute href and then i'm going to hard code in the closing parentheses and then end that with a semicolon and let's save that and let's take a look at what this looks like in our print style sheet so let me reload this and then open up the print preview you can see this isn't exactly what we're looking for if we zoom in here you can see that it prints out every link on the page with an href and that's is what we targeted but you can see that those links include the links and the header here it also includes author information a lot of things that the reader most likely doesn't care about they probably just want to see external links to your website so these are really the only ones that we would want printed out in our print style sheet so let's see if we can do this a little bit better now what some people suggest to do here is to target uh any anchor tags with an href that starts with and this carrot sign equals means that hrefs that start with and then they will type in here http colon and that will target any href that starts with http now this would work great if every internal link on our website was relative but if you hard code in the links with the full web address or if you're using a framework like wordpress or something like that then sometimes those will put in the full web address for you so let me show you what i mean by this if i inspect one of my links over here then you can see within the anchor tag the href even though it's internal to my website it still has the http and this links to localhost because i'm running this on my local web server so this approach really isn't going to work for us this only works if every internal link for your website is relative so what other options do we have here well if i pull up this tab here there is a css selector called not and what not does is it takes a css selector and then it applies styles to everything that is not that selector so it'd be easiest just for me to show you with an example here so in our example with our links right after the anchor tag here if i put in colon not then open up a parenthesis and we want the print parentheses to go around our href here so let's close that there and what this currently says is that we want all links that do not have an href that starts with http and what we want this to be is we don't want any links that start with our internal website here so in this case i'm running this website on a local web server right now so this will be http localhost now if i was on my live website then i would change this domain to whatever my live website url would be so if we save that and then we reload this page over here now if i pull up the print style sheet then you can see that it no longer adds urls into the header or any of these internal links like like this author url leave a comment none of that stuff but if we scroll down here to the bottom then you can see that it does add in the urls uh to these links that i have to these external links here that i have listed in the resources and that's exactly what we wanted so let me go ahead and zoom in there so you guys can read so yeah that's exactly what we were hoping for so this is the best way that i've found that i can remove internal links from my css print style sheets so i hope this was useful for you guys if you guys have any questions or if you know any alternate ways of doing this then go ahead and leave those in the comments below be sure to subscribe for future tips and tutorials and thank you for watching