Pembelajaran CSS 07 Membuat Spasi atau Whistespace

Halo kembali lagi saya bahasa mengenai css, yaitu whitespace atau bisa disimpulkan sebagai jarak berwarna putih / spasi. Oh, iya kamu juga kalau ingin memperlajari dasar css, bisa cek materi sebelumnya yang membahas mengenai Pembelajaran CSS 06 Case Sensitivity.

1. Kenali apa itu Whitespace?

Whitespace merupakan penyebutakan yang merujuk kepada karakter dari spasi yang tentunya tidak tampil di layar, contohnya seperti karakter spasi, tab, dan karakter enter yang biasa dikenal dengan karakter carriage returns.

Untuk penulisan declaration (property dan value), whitespace akan diabaikan. Sehingga kedua kode CSS berikut dianggap sama:

/* contoh pertama */
p {
     font-size : 18px;
     color : black;
   }


/* contoh kedua */

p {font-size : 18px; color : black;}

Coba kamu perhatikan pada contoh penulisan pertama agak panjang namun lebih mudah dibaca. Dan pada contoh kedua saya menyatukan penulisan selector dan seluruh property dalam 1 baris. Walaupun lebih hemat tempat, penulisan seperti ini tidak disarankan, karena membuat kode CSS susah dibaca (kecuali hanya terdiri dari 1 property singkat). Akan tetapi pada penulisan selector, penambahan sebuah tanda spasi bisa membuat perbedaan, seperti contoh berikut:

  p.pertama {
     font-size : 18px;
     color : black;
   }

  p .pertama {
     font-size  : 18px;
     color : black;
   }

Contoh selector pertama akan mencari seluruh paragraf yang memiliki atribut class=pertama, sedangkan pada contoh kedua, akan mencari seluruh tag HTML yang mimiliki class=pertama dan berada di dalam sebuah paragraf.

Kembali tentang whitespace, pada penulisan value dari property CSS, antara angka dan satuannya juga tidak boleh ada spasi, sehingga menulisan yang benar adalah:

   p {
     font-size : 18px;
   }

Dan bukan seperti ini ya :

   p {
     font-size : 18 px;
   }

kecuali pada sebuah value yang tidak membutuhkan nilai satuan, seperti nilai 0

Pembelajaran Selanjutnya?

Pembelajaran selanjutnya adalah cara untuk membuat komentar pada css sebagai informasi keterangan mengenai css, untuk lebih lanjutnya bisa baca dibawah ini :