Ads by Yasya El Hakim
Tutorial CSS Tingkat Dasar: Selector, Property, dan Nilai - Bagian 2

Jika HTML memiliki yang namanya tag, maka CSS memiliki yang namanya selector.

Selector merupakan sebuah istilah yang dapat kita gunakan untuk membuat suatu perubahan tampilan pada elemen HTML. Pada Tutorial CSS Tingkat Dasar ini, kita akan fokus dengan Selector yang sangat berfungsi untuk mengubah tampilan atau style dari elemen HTML tertentu.

Setiap selector, terdapat yang namanya "properties" yang berada di dalam atau diantara buka kurung "{" dan tutup kurung "}". Properties tersebut dapat berupa color, font-size, background-color, dan lain-lain.

Nilai dari setiap Property dapat ditentukan dengan menggunakan tanda titik dua ":" (Bukan tanda sama dengan "="). Untuk memisahkan antara satu Property dengan Property lain, kita dapat menggunakan tanda titik koma ";". Berikut adalah contohnya:

body {
    font-size: 14px;
    color: blue;
}


Nilai font-size dan color pada contoh kode diatas akan membuat semua teks yang ada didalam body menjadi berukuran 14px (Pixel) dan berwarna merah.

Panjang dan Presentase

Terdapat beberapa nilai unit untuk propery yang dapat kita gunakan pada CSS, tetapi disini kita hanya akan mengguankan unit yang umum digunakan. Berikut adalah beberapa unit serta sedikit penjelasannya:
  • px (Contoh: font-size: 12px) merupakan unit pixel.
  • em (Contoh: font-size: 2em) merupkakan unit untuk menghitung ukuran font. Jadi "2em" itu sama dengan dua kali ukuran font. Dengan kata lain, jika sebelumnya ukuran font yaitu 12px, maka 2em itu sama dengan 24px.
  • pt (Contoh: font-size: 12pt) merupakan unit point. Biasanya digunakan untuk media cetak.
  • % (Contoh: width: 80%) merupakan unit presentase.

Tidak hanya itu, terdapat juga unit lainnya seperti pc (Picas), cm (Sentimeter), mm (Milimeter), in (Inci), dll.

Ketika nilai dari suatu property itu kosong atau nol, kalian tidak perlu menentukan unitnya. Contoh, jika kalian ingin membuat sebuah tabel tanpa border (Garis Batas), maka kalian dapat menuliskan property CSS seperti border: 0, bukan border: 0px.

Dalam hal ini, "px" bukan berarti pixel yang berbentuk kotak-kotak kecil pada layar perangkat. Pada Browser Modern, jika kalian memperbesar atau memperkecil halaman Web yang memiliki ukuran font 12px, maka font tersebut tidak akan pecah atau berbentuk kotak-kotak, melainkan tetap seperti bentuk aslinya.

Sebelumnya: Tutorial CSS Tingkat Dasar: Menggunakan CSS - Bagian 1
Selanjutnya: Tutorial CSS Tingkat Dasar: Warna - Bagian 3
Daftar isi: Tutorial CSS Tingkat Dasar

0Komentar

Sebelumnya Selanjutnya