Member Avatar for Sinha's

Hello Friends,

I have a simple problem, in my HTML page I want to display a paragraph and link but do not want to print it. Please guide me how to use CSS to achieve this.

  • 3 Contributors
  • 3 Replies
  • 130 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by raj_developer

Dani AI

Generated

The goal is simply to keep some content visible on-screen but hidden when printed. The answers from and point in the right direction (use print-specific rules), but note a practical mistake in post: the CSS rule targeted #notprint while the example HTML used id="other". The selector in the print rules must match the element you actually want to hide.

If you use Bootstrap (tags include it), prefer its built-in utilities — they handle many edge cases and avoid extra CSS:

<p class="d-print-none">This paragraph shows on screen but will not print (Bootstrap 4/5).</p>

If you are not using a framework, simple alternatives that avoid the selector-mismatch problem include the HTML5 hidden attribute (with a small fallback):

<p hidden>This is screen-only content (HTML5)</p>

[hidden] { display: none !important; }  /* fallback for older UA styles */

For more complex needs (show/hide dynamically, or different layouts for print), use the print events so you can toggle display just before printing:

function beforePrint() { document.querySelectorAll('.screen-only').forEach(e=>e.style.display='none'); }
function afterPrint()  { document.querySelectorAll('.screen-only').forEach(e=>e.style.display=''); }
window.onbeforeprint = beforePrint;
window.onafterprint  = afterPrint;

Quick troubleshooting reminders:

  • Ensure selectors exactly match your HTML (IDs vs classes).
  • Inline styles are more specific; use !important in print CSS only as a last resort.
  • Test with Print Preview and DevTools print emulation (Chrome/Firefox).
  • Browsers may omit background colors/images by default; use -webkit-print-color-adjust: exact where needed and warn users that printer settings can affect output.

These approaches cover the common cases and avoid the selector/stylesheet ordering pitfalls seen in the thread.

Member Avatar for deathwithme

Hi,
it can be help you,

hi that's link
<a href="hell.html" style="color:black; filter:Glow(color=#ff0000, strength=12);">Click here!</a>
Member Avatar for Sinha's

Hello Friends,

I have a simple problem, in my HTML page I want to display a paragraph and link but do not want to print it. Please guide me how to use CSS to achieve this.

Friends problem has been solved. Here is the solution,

Create a new external style sheet in notepad and save it as a print.css, then type in the following-

#notprint {
  display : none;
}

then save it.

Insert following in your HTML page between <HEAD></HEAD>

<LINK rel="stylesheet" type="text/css" name="style1" href="print.css" [B]media="print"[/B]>

Next step is use the following <div></div> which ever you do not want to print (image, text etc)

<div id="other" name="other"> This line will be displayed but not print </div>

Regards!!

Member Avatar for raj_developer

Use separate styles for the same class.
For example,

@media screen
{
.sampleClassParagraph
{
display:block;
}
.sampleClassLink
{
text-decoration:underline;
}
}
@media print
{
.sampleClassParagraph
{
display:none;
}
.sampleClassLink
{
text-decoration:none;
}
}

The HTML elemnts which uses the above CSS will display the styles on screen. When printing, the styles will be removed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.