CSS

#03: Cara Menambahkan Komentar di CSS

Mandan Koding7 September 20220

Tidak hanya di HTML, di dalam dokumen CSS kita juga dapat menyisipkan komentar.
Komentar di gunakan untuk memberikan catatan penting pada setiap baris code yang di tulis.
Tujuannya yaitu untuk memudahkan developer untuk memahami code yang di tulis di kemudian hari.

Tujuan lain dari komentar yaitu untuk memudahkan developer lain memahami code CSS yang kita buat sebelumnya jika kita mewarisi project tersebut ke developer baru.

Di tutorial ini kita akan belajar cara menambahkan komentar sebaris dan multi baris ke dalam dokumen CSS

Cara Menambahkan Komentar di CSS

Pada materi sebelumnya kita sudah belajar mengenai Memahami Struktur Dasar Penulisan CSS. Di tutorial sebelumnya kita sudah latihan memberikan efek style pada dokumen HTML di bawah ini:

<h1>LOREM IPSUM DOLOR</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Sekarang kita akan latihan memberikan komentar pada dokumen CSS dari file HTML di atas.

Penulisan komentar di CSS yaitu dimulai dengan tanda /* dan diakhiri dengan tanda */

Perhatikan contoh berikut:

/* ini adalah blok style untuk judul */
 h1 {
    color: darkblue;
 }

/* ini adalah blok style untuk paragraph */

 p {
   color : yellow;       /* teks seluruh paragraph diatur menjadi warna kuning*/
   background: skyblue;  /* warna background skyblue*/
   font-size: 20px;     /* ukuran tulisan diperbesar menjadi 20px*/
 }

Jalankan code di atas di web browser dan lihat hasilnya:

Catatan: Komentar tidak akan di tampilkan pada halaman web dan komentar tidak mempengaruhi struktur tampilan dari halaman web

Komentar tidak hanya dapat di tulis satu baris, melainkan juga dapat di tulis lebih dari satu baris.

/* 
ini adalah blok style untuk judul h1
judul akan diberi warna yaitu darkblue
selebihnya tidak ada penambahan style pada judul
*/

 h1 {

    color: darkblue;
 }

Selain sebagai catatan, komentar juga dapat di gunakan untuk menonaktifkan sebagian code di dalam dokumen CSS, sehingga barisan code yang di apit oleh komentar tidak akan tampil di halaman web.

h1 {

    /* color: darkblue; */
 }

 p {

   /* color : yellow;  */    
   background: skyblue;  
   font-size: 20px;    
 }

Hasilnya:

Hasil di atas menjelaskan bahwa, baris code color pada tag h1 dan tag p di non aktifkan menggunakan komentar, sehingga style warna pada tulisan tidak ditampilkan oleh browser.

Materi Selanjutnya:
CSS Selector – Memahami Aturan Penulisan Selector di CSS