Halo semuanya, pada artikel ini badoystudio akan mengulas bagaimana cara membuat komentar di CSS. Untuk kamu yang ingin mengetahui lebih lanjut seperti apa pembahasannya, silahkan ikuti panduan berikut ini sampai selesai ya.
Daftar Isi
Memahami Komentar pada CSS Beserta Fungsinya
Komentar dalam CSS merupakan teks atau catatan yang tidak ditampilkan dan diartikan oleh browser, sehingga tidak akan mempengaruhi desain web sama sekali. Karena komentar nantinya hanya bisa dibaca dan dilihat oleh developer web yang menuliskan kode CSS. Adapun beberapa fungsi dibuatnya komentar pada kode-kode CSS, adalah sebagai berikut :
Untuk Membuat Catatan
Komentar baik itu di HTML, PHP, maupun CSS fungsi utamanya sama saja yaitu untuk membuat catatan tertentu dalam kode CSS. Contohnya, kalau kamu sedang belajar CSS dan supaya tidak ingat mengenai properti tertentu, kamu bisa menambahkan kalau ini adalah properti untuk tabel atau lainnya.
Guna Mencegah Kode CSS dieksekusi
Selanjutnya komentar yang dibuat pada CSS juga bisa kita fungsikan untuk mencegah agar kode CSS yang sudah ditulis jangan dulu dieksekusi atau tidak berfungsi sementara waktu.
Contohnya, kamu ingin mengganti kode CSS yang sudah ditulis dengan yang baru, namun kamu tidak yakin apakah kode yang baru ini akan berfungsi dengan baik atau tidak, maka alih-alih menghapusnya kamu bisa menonaktifkannya dengan komentar. Jadi, pada saat kode baru yang ditulis tidak berfungsi kita tetap bisa menggunakan kode CSS lama yang sementara dinonaktifkan dengan menggunakan komentar.
Memudahkan dalam Berkolaborasi
Dengan adanya penambahan catatan pada CSS maka ini akan memudahkan jika kamu berkolaborasi dengan orang lain pada saat mendesain website. Karena orang lain akan memahami kode CSS tertentu berfungsi untuk apa. Bayangkan kalau tidak ada catatan entah itu pengingat, penanda kode yang bermasalah, dan catatan mengenai kegunaan kode, kemungkinan besar teman kamu pasti bingung membaca kode-kode CSS yang sudah ditulis.
Cara Membuat Komentar di CSS dengan Mudah
Sebelum kita membahas bagaimana cara membuat komentar di CSS, kita harus tahu dulu tag yang digunakan untuk membuatnya, yaitu :
- Tag pembukanya : (/*)
- Tag penutupnya : (*/)
Penulisannya seperti contoh berikut ini :
/* komentar atau catatan ditulis di sini */
Untuk lebih jelasnya mengenai contoh, silahkan baca lanjutan pembahasannya di bawah.
Membuat Komentar Satu Baris ( Single Line )
Kamu dapat membuat komentar di CSS dengan satu baris atau basa disebut dengan Single Line. Komentar jenis ini umumnya digunakan untuk membuat catatan singkat mengenai kode CSS tertentu.
Contoh penggunannya seperti kode-kode di bawah ini :
/* digunakan untuk mengatur desain tabel */
.content-table{
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
}
Semakin panjang komentar atau catatan yang dibuat maka akan melebar ke samping dan tidak enak untuk dibaca, sehingga disarankan menggunakan komentar Multiple Line.
Membuat Komentar Beberapa Baris ( Multiple Line )
Jenis komentar yang kedua yaitu Multiple Line, di mana kamu bisa membuat komentar dalam bentuk catatan di antara kode-kode CSS yang dibuat dengan panjang.
Contoh penggunaannya seperti pada baris kode berikut ini :
/* bagian ini digunakan untuk
mengatur desain thead
dan juga mengatur desain tr
yaitu memberikan warna background
mengatur warna font atau tulisan
dan juga perataan teks */
.content-table thead tr{
background-color:blue;
color: #fff;
text-align: left;
font-weight: bold;
}
Shortcut Komentar di Text Editor Visual Studio Code dan Sublime Text
Supaya menulis komentar di CSS bisa lebih cepat kamu bisa gunakan shortcut atau tombol cepat. Jika kamu menggunakan text editor VS Code ataupun Sublime Text, tombol shortcutnya yaitu :
- CTRL + / (Jika menggunakan Windows),
- MacOS silahkan pakai Command + /,
- dan Linux menggunakan CTRL + SHIFT + /.
Penutup
Itulah cara membuat komentar di CSS, sangat mudah tentunya ya untuk dipraktekan. Semoga panduan ini membantu dan bermanfaat untuk kamu. Jangan lupa share juga ke temanmu yang lainnya supaya lebih tersebar luas manfaatnya.
Sumber gambar utama : freecodecamp.org
Guntoro