ในการออกแบบเว็บเพจโดยทั่วๆไป บางครั้งเราอาจไม่ต้องการให้มีบางส่วนของเว็บเพจ ถูกพิมพ์ออกมา เช่น เราอาจไม่ต้องการแสดงรูปเมื่อพิมพ์ (เพื่อประหยัดหมึก) การกำหนดให้เอกสารเป็น ขาว-ดำ แทนที่สีสรรเมื่อแสดงเพจแบบปกติ หรือการซ่อนเมนู หรือแม้กระทั่งทำให้เพจพิมพ์ออกมาแค่บางส่วนเป็นต้น

เราสามารถทำได้โดยการกำหนด CSS ให้กับเอกสารครับ โดยที่การกำหนด CSS เป็นชนิด print จะถูกเรียกใช้เมื่อพิมพ์ หรือกำหนดเป็น media เมื่อแสดงผลทางจอภาพ เป็นต้น (ยังมีแบบอื่นๆอีกแต่ไม่ขอกล่าวในที่นี้) รูปแบบการกำหนดทำได้โดย property media ครับ เช่น

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

ตัวอย่างเป็นการกำหนด CSS บนเอกสารเลยครับ โดยเมื่อพิมพ์ รูปภาพทั้งหมดบนเว็บจะไม่ถูกพิมพ์ออกมา แต่ถ้าแสดงบนเว็บปกติ รูปภาพก็จะถูกแสดงตามปกติ
 

<link rel="stylesheet" type"text/css" href="print.css" media="print">

นอกจากนี้ยังสามารถกำหนดบน CSS ภายนอกได้ด้วยครับ โดยการเขียน CSS ควบคุมต่างๆลงในไฟล์ print.css และกำหนด media="print" ถ้าเป็น CSS สำหรับการพิมพ์ หรือ เ็ป็น screen สำหรับการแสดงผล บน Browser

display:none; /* สำหรับกำหนดให้ไม่ต้องแสดงส่วนนั้นๆเมื่อพิมพ์ */

เทคนิคการเขียน CSS เพื่อควบคุมการพิมพ์ โดยทั่วไป การเขียน CSS เพื่อแสดงผลหรือเพื่อพิมพ์ก็มีลักษณะคล้ายๆกันครับ เราสามารถกำหนดส่วนต่างๆให้แสดงออกได้ตามต้องการด้วย CSS ปกติครับ เช่น การกำหนดไม่ให้มีรูปภาพ เมื่อพิมพ์ดังโค้ดด้านบน

@media print { /* เมื่อพิมพ์ ตัวอักษรทั้เอกสารจะเป็นขนาด 10pt และพื้นหลักเอกสารจะเป็นสีขาว */
   BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen { /* เมื่อแสดงปกติ ตัวอักษรจะเป็นขนาด medium และมีสีพื้นเป็นสีเงิน */
   BODY {font-size: medium; line-height: 1em; background: silver;}
}

หรือการกำหนด CSS ให้เมื่อแสดงเพจปกติใช้ฟ้อนต์ขนาดหนึ่ง แต่เมื่อพิมพ์ให้ใช้อีกแบบหนึ่ง

<style type="text/css">
@media print {
  .section {
    height: 100%;
    margin: 0px 0px 0px 0px;
  }
}
</style>

<div class = "section">section 1</div>
<div class = "section">section 2</div>

ตัวอย่างการกำหนด CSS เพื่อแบ่งหน้าพิมพ์ ตามที่เรากำหนดครับ เช่น เมื่อพิมพ์ section 1 จะพิมพ์ออกหน้าหนึ่ง และ section 2 จะถูกพิมพ์ออกอีกหน้าหนึ่ง