Learn

So far, we have been very concerned with how our page looks on screens, but we haven’t been considering the other ways in which users can consume the content of your web page. For example, how does the page look when printed? Luckily, there are some ways a page can be made more accessible, even when viewed on paper.

One way to do this is to use media queries, specifically the @media print query:

@media print { nav { display: none; } }

The above code snippet causes the nav element to be removed when the page is printed. This is useful for reducing clutter on the page, especially for elements with no real benefit from being present on paper as they cannot be accessed properly.

Print media queries can also be used to display values of elements that otherwise couldn’t be understood. For example, we can display the value of the href attribute when printed so the user can still have access to the link. To expose an href in printed form, the following code can be used:

@media print { a[href^="http"]:after { content: " (" attr(href) ")"; } }

Instructions

1.

Set display of the <nav> element to none when the web page is printed.

2.

Next, inside the same @media print query and underneath the nav selector ruleset that we just added, display the href value of the help link on the page when it is printed.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?