Pembelajaran CSS 06 Case Sensitivity

Halo mina-chuan, heheh sekali kali alay biar kalian tidak tegang belajarnya. Buat teman-teman sebelumnya saya sudah memberikan materi Pembelajaran CSS 05 Cara Penulisan Selector dan Property Dengan Benar dan artikel kali ini sebenarnya masih berkaitan dengan materi sebelumnya, jadi jangan lupa di bacaya.

1. Pengertian Case Sensitivity

Secara garis besar Case Sensitivity adalah sebagai pembahasan apakah sebuah bahasa pemrograman membedakan penulisan huruf kecil dan huruf besar. Secara umum, CSS bersifat case-insensitive, yang berarti tidak membedakan huruf besar dan huruf kecil. Kedua kode berikut akan dianggap sama :

   p {
     font-size : 18px;
   }
   p {
     foNT-SiZE : 18PX;
   }

Keduanya digunakan untuk mengubah ukuran font paragraf (tag <p>) menjadi 18 pixel. Walaupun demikian, terdapat beberapa kasus dimana huruf besar dan kecil akan dibedakan, tapi ini sebenarnya bukan terletak pada CSS, melainkan di HTML. Dalam HTML, penulisan atribut class adalah case sensitif. Perhatikan contoh berikut ini:

halo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Alodospem | Pembelajaran CSS 06 Case Sensitivity</title>

    <style>
        .belajar {
        color: blue;}
    </style>
</head>
<body>
        <h1>Belajar CSS</h1>
            <p class="belajar">
                Mohon jangan diganggu, lagi serius belajar CSS.
            </p>
            <p class="Belajar">
                Mohon jangan diganggu, lagi serius belajar CSS.
            </p>

    </body>
</html>

Gambar halo html di browser chrome milik alodospem

Pada contoh diatas, saya menggunakan 2 buah atribut class dengan nama "belajar" dan "Belajar". Di dalam CSS saya membuat selector ".belajar", hasilnya hanya 1 paragraf yang akan berwarna biru. Ini terjadi karena penulisan atribut class di HTML akan dibedakan apakah menggunakan huruf besar atau huruf kecil (case-sensitif).

Best practice atau cara yang disarankan adalah menggunakan huruf kecil untuk setiap penulisan selector, property dan value CSS. Jika butuh membuat selector yang terdiri dari 2 kata atau lebih, gunakan tanda dash " - ", seperti: paragraf-pertama atau main-header.

Pembelajaran Selanjutnya?

Pembelajaran CSS 07 Whitespace

Pembaca yang baik selalu meninggalkan jejak atau hanya sekedar reaction pada kolom komentar, agar saya sebagai penulis juga semangat dalam melanjutkan artikel ini. Berkomentarlah dengan baik dan sopan dan saling menghargai

Bagikan ke media sosial :