Mengenal sifat penurunan (Inheritance), Penulisan kode warna Mengenal satuan nilai(Value) di CSS

Mengenal sifat penurunan dalam CSS (Inheritance)

Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML Kepada tag HTML lainnya.

Syarat untuk inheritance adalah tag tersebut harus berada di dalam tag lainnya.

Di dalam HTML , setiap tag umumnya akan berada di tag lain.

Untuk seluruh tag HTML akan berada di dalam tag HTML, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag body.

Sebagai contoh, perhatikan potongan HTML berikut ini.

Dari contoh di atas,tag p berada di dalam tag div, sehingga dapat dikatakan tag div adalah induk parent dari tag p.

Sedangkan tag em yang berada di dalam tag p merupakan anak (child) dari tag p dan grandchild dari tag div.

Jika kita membuat kode CSS sebagai berikut.

Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag div akan berwarna hijau, walaupun di dalam tag div juga terdapat tag-tag lainnya.

Dapat dikatakan bahwa efek CSS tersebut tersebut diturunkan ( inherit) dari tag induk div kepada tag anak p dan em.

Namun perlu diketahui bahwa tidak semua property CSS akan diturunkan dari induknya.

Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.

Mengenal nilai property :inherit

Untuk memaksa penurunan, CSS memiliki nilai property:inherit.

Jika sebuah kode CSS memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).

Sebagi contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.

Contoh HTML yang akan kita gunakan adalah inherit.html

Maka hasilnya dari kode di atas menjadi seperti ini.

Penulisan kode warna pada CSS

Di dalam dunia visual seperti sekarang ini semua teknologi sekarang sangat berwarna, model warna yang digunakan adalah model warna RGB(Red Green blue).

Disebut RGB karena warna merah, hijau, dan biru inilah dari dasar warna lainnya.

Warna seperi kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.

Di dalam web design, CSS mendukung hingga 16 juta Kombinasi warna.

Warna ini berasal dari perpaduan warna merah, hijau, dan biru tersebut.

Masing masing warna dasar ini dapat bernilai 0 sampai 255, dimana 0 adalah tanpa warna, 255 adalah warna maksimal.

Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24 bit warna, atau juga disebut dengan true color.

Perpaduan ketiga warna ini akan memberi kita 255 kombinasi merah × 256 Kombinasi hijau × 256 kombinasi biru = 16.777.216 kombinasi warna.

Misalkan untuk mendapatkan warna kuning, sebenarnya warna kuning adalah perpaduan warna merah dan hijau.

Untuk mendapatkan warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.

Format #RRGGBB

Format penulisan #RRGGBB adalah yang paling populer digunakan untuk CSS.

Dimana RR adalah nilai untuk warna merah, GG hijau, dan BB untuk warna biru.

Masing masing nilai ini berisi angka 00 sampai dengan FF.

Kenapa FF?,karena CSS menggunakan angka heksadesimal.

FF adalah nilai maksimal, ekuivalen dengan 255 dalam nilai Desimal.

Contohnya #FF0000 adalah wsrna merah murni, #00FF00 adalah warna hijau murni, sedangkan #777777 adalah kode warna untuk silver.

Format #RGB

Selain menggunakan format warna 6digit, CSS juga mendukung penulisan 3 digit.

Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit.

Contoh nya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F adalah singkatan dari #FF00FF,#09A sama dengan #0099AA(Merah=00, hijau=99, biru=AA).

Penulisan desimal

Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna menggunakan angka desimal.

Format penulisan nya adalah :rgb(0,160,255) atau rgb(0%,63%,100%), dimana urutan warna adalah merah, hijau,biru.

Kata warna(keyword)

Selain menggunakan kode warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa Inggris, yakni: aqua, black, blue, fuchsia gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.

Kata kata ini berasal dari warna dasar VGA windows dan dikenal dengan istilah classic internal color.

Namun cara ini sudah banyak ditinggalkan karena lebih banyak orang memilih untuk menggunakan kode warna hex karena di anggap lebih mudah.

Sebagai contoh untuk penulisan kode warna di atas, saya akan menampilkan nya di dalam file.html

Maka hasil dari kode di atas akan menjadi seperti ini:

Mengenal satuan nilai(value) dalam CSS

Di CSS kita bisa mengatur nilai dari sebuah elemen sesuai dengan kehendak kita, tapi dengan satuan yang sesuai tentunya.

Satuan nilai yang absolut

Satuan nilai yang absolut ini artinya nilai tersebut merupakan nilai ukuran yang biasa digunakan di media percetakan atau dengan kata lain: ukuran di dunia nyata

Satuan nilai absolut ini juga tudak dipengaruhi oleh elemen lainnya.

Nilai yang ada ada di salam satuan absolut adalah: ada milimeter(mm), centimeter (cm), inchi(in), point(pt), dan pica(pc).

Kelima nilai absolut ini berasal dari media percetakan.

Jika satuan nilai absolut tidak dipengaruhi oleh elemen lain, maka satuan nilai relatif dapat dipengaruhi oleh elemen lainnya.

Apa saja satuan nilai relatif? Ada pixel(px), em-height(em), dan X-height(ex).

Dari ke-3 satuan nilai di atas, yang paling sering digunakan adalah pixel(px).

Ukuran ini tidak terikat dengan perbandingan media tertentu, karena bersifat relatif.

Ukuran 1px ini sama dengan ukuran 1px di monitor.

Nilai persentasi

Nilai persentasi adalah sebuah nilai perseratus(%) dari suatu property yang relatif terhadap induk(parent) dari tag tersebut.

Berikut adalah contoh perbandingan fontsize.html, dimana saya menampilkan ukuran property font-size dengan berbagai macam value.

Maka hasil dari kode tersebut