Mengenal Jenis Dasar Value Dalam CSS

Pada kesempatan kali ini Blog Pintasku masih membahas seputar Belajar Dasar CSS, sebelumnya saya pernah menjelaskan tentang Mengenal Jenis Dasar Selector CSS nahh sekarang kita akan Mengenal Lebih Lanjut Tentang Value Dalam CSS

Di dalam CSS itu terdapat beberapa jenis value (nilai) yang dapat diberikan kepada Property, antara lain sebagai berikut :

1. Predifined Value

Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined 

value ini adalah pada style berikut.

h1 {
   font-style : italic; 
   }

Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini value 'italic' merupakan predefined value. Untuk properti font-style terdapat pilihan value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique. Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik

2. Bilangan

Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini adalah contoh penggunaan value bilangan.

p {
  line-height : 2; 
  }

Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari ukuran fontnya.

3. Panjang dan Persentase

Untuk menyatakan panjang, besar dan persentase, value harus diberikan satuan seperti px (pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini adalah contoh penggunaan Value dengan panjang dan Persentase dalam CSS.

h1 {
font-size : 20px;  /* membuat ukuran font 20 pixel */ 
   }

hr {
width : 20%;  /* membuat garis horizontal dengan panjang 20% terhadap lebar jendela browser /* 
   }

Tetapi untuk jaman sekarang penggunaan satuan pixel untuk mengatur ukuran layout suatu halaman web itu sudah sangatlah jarang karena dibilang tidak bisa menjadi responsive, berbeda dengan menggunakan satuan persen, halaman web kita nanti bisa menyesuaikan sendiri dengan ukuran layar si pengunjung, oleh karena itu penggunaan satuan pixel utnuk mengatur lebar layout sudah jarang.

4. URL

Suatu value bisa juga dapat berupa URL, dimana penggunaan value ini sering digunakan untuk property background.

body {
     background : url(img/image.jpg); 
     }

Style di atas untuk memberi background image pada body yang diambil dari folder img dengan nama file image.jpg. 

5. Warna

Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapat dilakukan yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red, green, yellow, dll) atau dengan menuliskannya dalam kode hexadesimal. Berikut ini
contohnya

p {
  color : red; 
  }

p {
  color : #FF0000;  /* identik dengan warna merah (hexadesimal) 
  }