Tutorial CSS Part 3 : Mengenal jenis-jenis value pada css

Kita berjumpa lagi, setelah kemarin kita membahas tentang Mengenal Jenis-jenis selector pada css.Dan untuk hari ini kita akan melanjutkan tutorial mengenai css yaitu mengenal jenis-jenis value pada css.

sumber gambar : pintasku.net

Value (nilai) pada css ada 5 yaitu predifined value, bilangan, panjang dan persentase, url, dan warna.Kita akan membahasnya secara satu-persatu.

Predifined value

Value ini juga merupakan nilai yang sudah terdefinisikan oleh XHTML.Value ini dapat dipilih dari beberapa alternatif pilihan yang ada.Lihat contoh di bawah ini.

h1{
  font-style: italic;
}

Coba kita lihat pada kode di atas, style di atas berguna untuk membuat text menjadi miring pada element heading 1 (h1).Dalam hal ini value "italic" merupakan predifined value.Untuk properti font-style terdapat pilihan yang telah didefinisikan oleh XHTML yakni, italic, normal, dan oblique.

Bilangan

Value ini dapat diartikan sebagai bilangan tertentu (tanpa bilang satuan apapun).Lihat pada contoh dibawah.

input{
 width: 400;
 height: 30;
}

Yang dimaksud untuk style di atas adalah untuk mengatur tinggi dan lebarnya pada element input html.

Baca juga : Mengenal Jenis-jenis selector pada css

Panjang dan Persentase

Untuk membuat panjang, besar dan persentase, value harus diberikan satuan seperti, px (pixel), em, cm(centimeter), mm (milimeter), pt (points), pc (picas), dan juga % (persen).Coba lihat contoh dibawah.

h1{
 font-size: 100%;
}

h2{
 font-size: 20px;
}

Pada contoh di atas, element html yaitu h1 akan berubah text menjadi ukuran yang sesuai dengan valuenya yaitu 100%, begitu sebaliknya.Tetapi untuk jaman sekarang ini dalam membuat sebuah halaman website sudah sangat jarang untuk mereka menggunakan px, karena px tidak bisa menjadi responsive, berbeda dengan value persen, halaman web kita nanti akan menyesuaikan sendiri ukurangnya sesuai dengan ukurang layar si pengunjung.

URL

Value ini juga sangat sering di pakai, biasanya di pakai untuk membuat background, dan gambar.Mari lihat pada contoh di bawah.

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

Untuk contoh di atas berfungsi untuk membuat sebuah background (latar belakang) pada sebuah website.

baca juga : Membuat gambar pada html

Warna

Untuk memberi warna pada properti terdapat banyak cara yaitu dengan menuliskan secara eksplisit yang diinginkan, misalnya red, green, blue, atau bisa juga anda menulis dengan kode hexadesimal.Lihat contoh di bawah.

h1 {
    color: blue;
}

h2{
 color: #fff; /*#fff adalah kode hexadesimal yaitu berwarna putih*/
}

Ada banyak sekali kode warna hexadesimal, maka dari itu untuk anda yang ingin lihat silahkan ke website ini untuk melihat warna-warnanya color-hex.com.


Oke sekian tutorial mengenai Mengenal jenis-jenis value pada css.
Semoga bermanfaat untuk anda, terima kasih