Bagaimana cara untuk menyisipkan komentar di css file?

Pada tutorial sebelumya, kita sudah belajar Tutorial Belajar HTML5 Bagian 19 : Cara Membuat Kode CSS di HTML, selanjutnya kita aka megembang materi ini bagaimana cara menyisipkan kode CSS di HTML.

Table of Contents Show

Interal CSS – Elemen <style>
Inline CSS – Atribut Style
CSS Eksternal – Elemen <link>
Import CSS – Aturan @import
Prioritas Aturan CSS
Menangani Browser lama
Komentar CSS
Bagaimanakah menyisipkan komentar dalam file CSS?
Bagaimana cara penulisan komentar pada HTML?
Perintah apakah untuk menambahkan komentar pada coding?
Jika ingin menambahkan komentar pada script harus menggunakan simbol apa?

Ada 4 cara untuk memanggil style CSS pada dokumen HTML.

Metode yang paling umum digunakan adalah CSS inline dan CSS Eksternal.

Interal CSS – Elemen <style>

Anda dapat membuat kode CSS ke dalam dokumen HTML menggunakan elemen <style>.

Tag ini ditempatkan di dalam tag <head> … </head>.

Kode yang telah disusun menggunakan sintaks ini akan diterapkan ke semua elemen yang berada di dokumen HTML. Berikut adalah susunan kode umum dari css :

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>Ini adalah heading.</h1>
      <p>Ini adalah paragraph.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Atribut

Atribut yang terkait dengan elemen <style> adalah :

AtributNilaiDeskripsitypetext/cssMenentukan bahasa style sheet sebagai tipe konten (tipe MIME). Ini adalah atribut wajib.mediascreen
tty
tv
projection
handheld
print
braille
aural
allMenentukan perangkat tempat dokumen akan ditampilkan. Nilai default adalah all. Ini adalah atribut pilihan (tidak wajib).

Inline CSS – Atribut Style

Anda dapat menggunakan atribut gaya dari elemen HTML apa pun untuk menentukan aturan gaya. Aturan ini hanya akan diterapkan ke elemen itu.

Berikut adalah bentuk sintaks umum :

<element style = "...kode style....">

Atribut

Nilai dari atribut style adalah kombinasi dari deklarasi style yang dipisahkan oleh titik koma (;).

Berikut adalah contoh inline CSS berdasarkan sintaks di atas :

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         Ini adalah inline CSS 
      </h1>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

CSS Eksternal – Elemen <link>

Elemen <link> dapat digunakan untuk memanggil file stylesheet eksternal dalam dokumen HTML Anda.

Metode eksternal adalah membuat file CSS terpisah dengan ekstensi .css.

Anda menentukan semua aturan style dalam file teks ini dan kemudian Anda dapat meyisipkkan file ini dalam dokumen HTML menggunakan elemen <link>.

Berikut adalah sintaks umum penggunaan file CSS eksternal :

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Atribut

Atribut yang terkait dengan elemen <style> adalah :

AtributNilaiDeskripsitypetext cssMenentukan bahasa style sheet sebagai tipe konten (tipe MIME). Atribut ini wajib diisi.hrefURLMenentukan lokasi file style sheet. Atribut ini wajib diisi.mediascreen
tty
tv
projection
handheld
print
braille
aural
allMenentukan perangkat tempat dokumen akan ditampilkan. Nilai default adalah all. Ini adalah atribut pilihan.

Buatlah sebuah file CSS styleku.css yang memiliki aturan berikut :

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Setelah menyimpan file dengan nama stylesaya.css, kemudian panggil file tersebut ke dalam dokumen HTML sebagai berikut :

<head>
   <link type = "text/css" href = "styleku.css" media = "all" />
</head>

Import CSS – Aturan @import

@import digunakan untuk mengimpor style sheet eksternal dengan cara yang mirip dengan elemen <link>. Berikut adalah sintaks umum dari penggunaan @import.

<head>
   @import "URL";
</head>

URL di sini berfungsi untuk mementukan lokasi file style sheet. Anda juga dapat menggunakan sintaks lain.

<head>
   @import url("URL");
</head>

Berikut adalah contoh yang menunjukkan cara mengimpor file CSS ke dalam dokumen HTML :

<head>
   @import "styleku.css”;
</head>

Prioritas Aturan CSS

Kita telah membahas 4 cara menggunakan kode CSS dalam dokumen HTML.

Semua kode dalam CSS memiliki prioritas tertinggi.

Contoh, tag <style> … </style> memiliki prioritas yang lebih tinggi dibandingkan kode CSS secara eksternal.

Aturan CSS apa pun yang dituliskan dalam tag <style> … </style> akan lebih diprioritaskan dan akan menimpa aturan yang ditentukan dalam file CSS eksternal.

Aturan apa pun yang ditentukan dalam file CSS eksternal memiliki prioritas terendah, dan aturan yang ditentukan dalam file ini hanya akan diterapkan jika 2 aturan di atas tidak digunakan.

Menangani Browser lama

Masih banyak browser lama yang belum support CSS.

Jadi, kita harus berhati-hati saat menulis kode CSS di dokumen HTML.

Kode berikut menunjukkan bagaimana Anda dapat menggunakan tag komentar untuk menyembunyikan CSS dari browser lama :

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Komentar CSS

Sering kali, Anda mungkin perlu memberi komentar tambahan di blok CSS Anda.

Jadi, sangat mudah untuk mengomentari bagian mana pun di CSS.

Anda dapat dengan mudah meletakkan komentar di dalam /*….. Ini adalah komentar dalam CSS ….. * /.

Anda dapat menggunakan / * …. * / untuk mengomentari blok yang terdiri dari beberapa baris dengan cara yang sama seperti yang Anda lakukan dalam bahasa pemrograman C dan C ++.

Bagaimanakah menyisipkan komentar dalam file CSS?

Penulisan komentar pada CSS untuk satu baris dilakukan dengan menambahkan tanda double slash "//". Namun jika untuk beberapa baris dapat menggunakan tanda notasi slash dan asteric "/*" sebagai pembuka komentar. Dan untuk menutup komentar digunakan notasi asteric dan slash "*/".

Bagaimana cara penulisan komentar pada HTML?

Penulisan komentar pada HTML diawali dengan tag pembuka . Kode-kode HTML baik itu berupa elemen, tag, teks dan lainnya yang terletak di antara tag  akan diabaikan oleh browser dan tidak akan ditampilkan pada halaman HTML.

Perintah apakah untuk menambahkan komentar pada coding?

Jika kamu menggunakan teks editor Visual Studio Code, kamu bisa membuat komentar dengan menekan Ctrl + / .

Jika ingin menambahkan komentar pada script harus menggunakan simbol apa?

Tanda // (Model C++) : tanda ini biasanya digunakan untuk membuat komentar atau catatan yang hanya satu baris. Tanda # (Model Unix Shell) : tanda ini juga bisa digunakan untuk membuat komentar atau catatan yang hanya satu baris. Tanda /* (Model C) : tanda ini digunakan untuk membuat komentar lebih dari satu baris.