CSS untuk Cetak

Pengaturan Awal

  1. Tambahkan CSS Terpisah: Buat file CSS terpisah atau masukkan kode CSS di dalam tag <style> di halaman HTML Anda.

  2. Mengatur Media Print: Gunakan @media print untuk mengaplikasikan gaya CSS khusus untuk pencetakan. Contohnya:

    @media print {
 /* Gaya CSS untuk pencetakan di sini */
}

Menghilangkan Elemen Tidak Dicetak

  1. Menghilangkan Background dan Warna: Pastikan latar belakang dan warna teks yang terlihat di layar tidak mencetak dengan menambahkan properti CSS berikut:

    @media print {
 body {
   background-color: white;
   color: black;
 }
}

  2. Menghilangkan Elemen Tidak Penting: Anda bisa menggunakan CSS untuk menyembunyikan elemen-elemen yang tidak perlu dicetak, seperti tombol navigasi atau elemen sidebar:

    @media print {
 .element-untuk-dihapus {
   display: none;
 }
}

Mengatur Posisi dan Tampilan

  1. Mengatur Margin: Sesuaikan margin halaman untuk pencetakan, biasanya lebih besar daripada saat tampilan di layar:

    @media print {
 body {
   margin: 0.5in;
 }
}

  2. Menghilangkan Tautan Underline: Biasanya, tautan dicetak dengan garis bawah. Untuk menghilangkannya, gunakan:

    @media print {
 a {
   text-decoration: none;
 }
}

Mengatur Ukuran Teks

  1. Mengatur Ukuran Teks: Anda bisa mengatur ukuran teks agar lebih sesuai untuk pencetakan:
    @media print {
 p, h1, h2, h3 {
   font-size: 12pt;
 }
}

Ini hanya beberapa tip dasar, Anda bisa menyesuaikan CSS lebih lanjut sesuai dengan kebutuhan halaman web Anda. Pastikan untuk menguji hasil pencetakan di berbagai browser untuk memastikan tampilan yang konsisten.

PREVIOUS
NEXT