Komentar CSS tidak ditampilkan di browser, tetapi dapat membantu mendokumentasikan suatu source code.
Komentar CSS
Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika akan mengedit source code di kemudian hari.
Komentar diabaikan oleh browser.
Komentar CSS ditempatkan di dalam elemen <style>, dan dimulai dengan /* dan diakhiri dengan */:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Halo Dunia!</p>
<p>Paragraf ini ditata dengan CSS.</p>
<p>Komentar CSS tidak ditampilkan pada web browser.</p>
</body></html>Selain itu komentar dapat ditambahkan di mana pun, baik di dalam source code yang akan diberi komentar:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<p>Halo Dunia!</p>
<p>Paragraf ini ditata dengan CSS.</p>
<p>Komentar CSS tidak ditampilkan pada web browser.</p>
</body></html>Komentar juga dapat menjangkau beberapa baris:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
/* Ini adalah
beberapa baris
komentar */
p {
color: red;
}
</style>
</head>
<body>
<p>Halo Dunia!</p>
<p>Paragraf ini ditata dengan CSS.</p>
<p>Komentar CSS tidak ditampilkan pada web browser.</p>
</body></html>Komentar HTML dan CSS
Dari tutorial HTML, diketahui bahwa menambahkan komentar ke HTML dapat dengan menggunakan sintaks <!--...-->.
Dalam contoh berikut, digunakan kombinasi komentar HTML dan CSS:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Ini adalah komentar CSS */
}
</style>
</head>
<body>
<h2>Judul Saya</h2>
<!-- Ini adalah komentar HTML : Paragraf ini akan berwarna merah -->
<p>Halo Dunia!</p>
<p>Paragraf ini ditata dengan CSS.</p>
<p>Komentar HTML dan CSS tidak ditampilkan pada web browser.</p>
</body></html>Tutorial sebelumnya : Penggunaan CSS Selector
Tutorial setelahnya : Warna CSS
Semua Tutorial CSS : Tutorial CSS