3.3 Belajar CSS [ Penggunaan CSS ]

Penggunaan CSS

A. CSS Colors

Sebagai pengguna ketika pertama kali melihat sebuah halaman web yang dilihat adalah warna halaman web tersebut. Pada HTML untuk menampilkan warna sudah ditentukan dengan penamaan tertentu atau nilai RGB, HSL, HEX, RGBA, HSLA.

Contoh penulisannya adalah :

Hasilnya...

1) Warna RGB

Warna RGB ditentukan dengan nilai intensitas warna Red (Merah), Green (Hijau), Blue (Biru). Setiap parameter (merah, hijau, biru) intesitas warnanya didefinisikan sebagai bilangan bulat antara 0 sampai 255. Sebagai contoh rgb (255,0,0) dirender sebagai warna merah, karena parameter merah diatur dengan nilai tertinggi yaitu 255.

sumber : Petani Kode

Contoh :

Hasilnya...

2) Warna HSL

Fungsi HSL merupakan fungsi yang menghasilkan warna berdasarkan konsep warna HSL. HSL merupakan singkatan dari Hue, Saturation, Lightness.

sumber : Petani Kode

Nilai hue yang diberikan pada fungsi ini dimulai dari 0-360, karena model warna HSL bentuknya seperti tabung, sehingga yang digunakan adalah nilai derajat dari lingkaran tutup tabungnya. Sedangkan untuk nilai saturation dan lightness menggunakan persen, dari 0%-100%.

Contoh :

Hasilnya...

3) Warna HEX (Hexadecimal)

Kode heksadesmial merupakan kode yang menggunakan bilangan heksa desimal, memiliki nilai dari 0 sampai f (16 dalam desimal). Kode heksa demsial diawali dengan tanda pagar (#), kemudian diikuti kode heksanya. Kode ini dapat terdiri dari 3 digit atau 6 digit bilangan.

Contoh :

Hasilnya...

Setiap angka dalam kode heksa desimal menentukan nilai warna dalam RGB (#RRGGBB) atau (#RGB). Misalnya untuk yang enam digit, dua angka di depan adalah untuk nilai warna merah, dua angka berikutnya untuk warna hijau, dan dua angka terakhir untuk warna biru.

B. CSS Background

Properti CSS Background digunakan untuk memberikan efek dan gaya pada latar belakang. Properti CSS Background antara lain adalah background-color, background-image, background-repeat, background-attachment, dan background-position.

1) Background-color

Properti background-color digunakan untuk menentukan warna latar belakang suatu elemen. Warna latar belakang dapat ditulis :

Hasilnya...

2) Background-image

Jika ingin menggunakan warna latar gambar, maka kita bisa menggunakan properti background-image atau background saja. Format gambar yang didukung bisa jpg, png, gif, webp, avif, svg, dll.

Contoh :

Hasilnya...

3) Background-repeat

Jika kita melakukan zoom out pada contoh yang tadi, maka hasilnya akan seperti ini :

Gambar background-nya akan diulang-ulang. Jika kamu pakai ukuran gambar yang kecil, maka akan ditampilkan seperti itu. Kita bisa gunakan properti "background-repeat". Properti ini punya beberapa nilai :

repeat-x artinya mengulang background pada sumbu x saja
repeat-y artinya mengulang background pada sumbu y saja
no-repeat artinya tidak mengulang background.

Contoh :

Hasilnya...

4) Menentukan Ukuran Background

Kita bisa mengatur ukuran background dengan properti "background-size", properti ini punya beberapa nilai yang valid :

px, pt, em, rem, fixed) ukuran dalam angka dan satuan, contoh 200px, 20em
vw, vh (dynamic) mengikuti ukuran tinggi dan lebar layar (view port)
contain (dynamic) mengikuti ukuran lebar elemen
cover (dynamic) mengikuti ukuran lebar dan tinggi elemen

Contoh :

C. CSS Border

Garis dapat kita buat dengan properti "border". Properti yang digunakan untuk membuat garis pada CSS adalah "border". Properti ini memiliki 3 nilai yang harus diberikan :