Sintaks dan Komentar Pada CSS

Saat ini kita akan membahas mengenai cara menggunakan sintaks dan komentar CSS untuk mengembangkan desain website interaktif. CSS akan membantu kita dalam mendesain tata letak dan tampilan sebuah website bagus.

Bagaimana Sintaks pada CSS…?

Sintaks CSS merupakan cara penulisan elemen dalam CSS. Aturan penulisan CSS terdiri dari blok selector dan blok deklarasi.

Penjelasan Sintaks CSS
contoh selector —-> h1
contoh deklarasi —> color:red; font-size:12px;

* Selector menunjukan elemen HTML yang akan didesain.
* Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh semicolon (titik koma).
* Setiap deklarasi terdapat nama property dan sebuah value, yang dipisahkan oleh colon (titik dua).

Contoh Sintaks pada CSS…

p {color:blue;text-align:center;}

Untuk membuat CSS lebih mudah dibaca, anda bisa menempatkan satu deklarasi pada setiap baris. Misalnya dari kode CSS diatas diubah menjadi:

p {
    color:blue;
    text-align:center;
}

Apa fungsi komentar pada CSS…?

Oke, komentar merupakan sebuah kode yang tulis namun tidak dieksekusi (diabaikan). Fungsi komentar untuk mempermudah penjelasan kode dan membantu kita ketika akan mengedit source code di masa yang akan datang.

Bagaimana cara menulis komentar pada CSS…?

Komentar CSS akan diabaikan oleh Web Browser. Untuk memulai komentar anda bisa menggunakan tanda /* dan diakhiri dengan tanda */. Komentar menggunakan tanda ini bisa single line maupun multiple line (banyak baris).

Contoh Komentar pada CSS…

<!DOCTYPE html>
<html>
    <head>
    <style>
    p {
        color: red;
        /* Ini adalah komentar single-line */
        text-align: center;
    }
    /* Ini adalah
    komentar
    multi-line */
    </style>
    </head>
    <body>

    <p>Tutorial Belajar CSS</p>
    <p>Paragraf ini didesain dengan CSS.</p>
    <p>Komentar CSS tidak ditampilkan pada browser.</p>

    </body>
</html>

Output :

Sintaks dan Komentar CSS

Bisa anda lihat, penggunaan komentar CSS pada bagian elemen tag <style>…</style>, terdapat komentar single line dan multi-line. Coba jika tidak percaya!

Demikian tutorial menggunakan sintaks dan komentar CSS untuk membuat website yang interaktif. Semoga ilmu ini bermanfaat, terima kasih.