Dicky BLC Telkom - KPLI Klaten

Home All posts

Selasa, 14 Februari 2017

CSS | Dicky Genraz Februari 14, 2017

CSS: Mengenal Sifat Penurunan Dalam CSS (Inheritance)

Assalamu'alaikum wr.wb

Kali ini saya akan membahas tentang Efek Penurunan Property di Dalam CSS (Inheritance).

Pengertian Inheritance dalam CSS

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 dalam 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 diatas, 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, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.

Namun perlu diperhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.

Property seperti background-color yang digunakan untuk mengubah warna latar belakang sebenarnya juga tidak diturunkan, namun ‘seolah-olah’ diturunkan. Hal ini terjadi karena nilai ‘default’ dari property background-color adalah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah juga bewarna seperti induknya.

Mengenal Nilai Property: Inherit

Untuk ‘memaksa’ proses penurunan, CSS memiliki nilai property: inherit. Jika sebuah kode CSS memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).

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

Contoh:

Dalam contoh kode HTML diatas, saya menggunakan dua kalimat yang memiliki nama class yang berbeda, yakni class satu dan class dua.

Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang memiliki class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan kepada tag <p>.

Pada class=”dua”, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama dengan yang didefenisikan pada tag induknya.

Sifat inheritance CSS ini akan memudahkan dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.

Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup dengan:

Dan seluruh tag yang berada di dalam tag body (hampir semua tag merupakan child dari tag body), ukuran fontnya akan berubah menjadi 14px.

Sekian pembahasan tentang Efek Penurunan Property di Dalam CSS (Inheritance).

Semoga Bermanfaat...!!!

Waasalamu'alaikum wr.wb

Senin, 13 Februari 2017

CSS | Dicky Genraz Februari 13, 2017

CSS: Urutan Prioritas Selector CSS (Specificity)

Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan membahas tentang Urutan Prioritas Selector CSS (Specificity). Jika pada tutorial sebelumnya kita telah membahas tentang Urutan Prioritas Selector CSS (Cascading), yaitu kode CSS tersebut (inline style memiliki prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas kode CSS jika seluruh kode CSS tersebut berada dalam file yang sama. Dalam kasus ini kita akan mempelajari apa yang akan terjadi jika beberapa kode CSS yang dibuat saling menimpa.

Agar lebih mudah dipahami, sillahkan buat file HTML dengan nama spesifik.html :

Sebelum anda menjalankan file spesifik.html tersebut, silahkan perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang ‘mencoba‘ untuk merubah warna sebuah paragraf. Dan silahkan tebak akan bewarna apa paragraf “Sedang Belajar CSS…

Dan, seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS “#aaa” adalah tempat pendefenisisan warna “color:orange”, namun bagaimana ini bisa terjadi? bagaimana dengan ke-4 defenisi lainnya?

Jawabannya: karena #aaa dianggap paling spesifik atau paling detail dari ke-4 selector lainnya.

Cara Menghitung kespesifikan Selector CSS

CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.

Aturan kespesifikan CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5, atau agar lebih mudah nilai 0,1,0,0 bisa ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.

Berikut adalah nilai CSS Specificity untuk selector di dalam CSS:

Setiap element/tag selector bernilai 0,0,0,1
Setiap class selector, attribut selector bernilai 0,0,1,0
Setiap ID selector bernilai 0,1,0,0
Setiap inline style bernilai 1,0,0,0

Dengan menggunakan aturan tersebut, mari kita hitung angka kespesifikan dalam contoh sebelumnya.

Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2

Dari hasil yang kita peroleh, maka selector #aaa memiliki nilai paling tinggi, yaitu 0,1,0,0. Maka, karena itulah paragraf dalam contoh spesifik.html bewarna orange.

Sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibuat pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah kode HTML yang ada, atau tidak berefek apa-apa. Mungkin jawabannya adalah nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami aturan prioritas dan kespesifikan CSS sangat penting untuk menghindari hal tersebut.

Mengenal Perintah !important

Jika aturan prioritas diatas tidak cukup, CSS menyediakan “senjata” pamungkas, yaitu menggunakan perintah !important.

Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan perintah !important.

Perhatikan akhir baris pada selector p, saya menambahkan perintah !important diakhir property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.

Penggunaan perintah !important sebaiknya digunakan jika memang sudah terdesak dan sedapat mungkin dihindari. Hal ini karena perintah !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.

Sekian pembahasan tentang Urutan Prioritas Selector CSS (Specificity).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Minggu, 12 Februari 2017

Kegiatan | Dicky Genraz Februari 12, 2017

Workshop PHP Indonesia Jogloraya 12/02/2017

Assalamu'alaikum wr.wb

Pada Hari Minggu, 12 Februari 2017 kami anak-anak BLC kemali mendapatkan pelatiha dari Komunitas PHP Indonesia Jogloraya. Kali ini materi yang disampaikan sudah sampai ke PHP.

Sekian & Terima Kasih....

Wassalamu'alaikum wr.wb

Sabtu, 11 Februari 2017

| Dicky Genraz Februari 11, 2017

Belajar CSS : Urutan Prioritas Selector CSS (Cascading)

Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan membahas Urutan Prioritas Selector CSS (Cascading). Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS (Cascading) ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading.

Pengertian Cascading dari CSS
CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.

Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas tentang prioritas CSS dilihat dari kespesifikannya.

Efek Cascading berdasarkan sumber kode CSS
Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi merah. Namun pada saat yang sama kita juga membuat internel style sheet untuk mengubahnya menjadi warna hijau, maka warna apakah yang akan tampil di browser?

Untuk mengujinya marilah kita mencobanya secara langsung, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode CSS berikut:

Lalu buat file HTML, saya menggunakan prioritas.html, simpanlah kedua file pada folder yang sama:

Perhatikan bahwa sebelum tag <style>, saya “memanggil” file prioritas.css terlebih dahulu. Lalu pada tag <h2> yang kedua saya menambahkan atribut “color:blue” pada tag <h2>.

Jika kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan bewarna hijau dan biru, dan tidak ada yang bewarna merah.

Dari contoh sederhana diatas, tag <h2> sebenarnya “dikenakan” atau “diubah” oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu kode yang akan “menang”.

Dalam masalah ‘timpa-menimpa’ ini, CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling ‘bentrok’, maka urutan prioritasnya adalah sebagai berikut (dari yang paling kuat):

Inline style, yakni style yang langsung melekat pada tag.
Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>).
Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import.

Maka jika melihat sekali lagi kode HTML diatas, text “Warna 1” akan berwarna hijau karena internal style color:green lebih mendapat prioritas lebih tinggi daripada external style color:red.
Sedangkan text “Warna 2” berwarna biru karena inline style color:blue lebih mendapat prioritas daripada external style color:red maupun internal style color:green.

Sekian pembahasan tentang Urutan Prioritas Selector CSS (Cascading).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Jumat, 10 Februari 2017

CSS | Dicky Genraz Februari 10, 2017

CSS: Cara Penggunaan Selector CSS

Assalamu'alaikum wr.wb

Kali ini saya akan membagikan Cara Penggunaan Selector CSS. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag <em> yang berada di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.

Contoh:

Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag header (<h2>), paragraf(<p>), dan list (<ol>).

Perhatikan juga pada bagian <head> halaman HTML tersebut saya juga menyediakan tag <style> yang akan kita isi dengan CSS. Beberapa dari tag HTML yang ada juga telah memiliki atribut seperti “class” dan “id” yang siap di-“style” menggunakan CSS.

1. Membuat seluruh tag header <h2> berwarna merah

Karena kita menginginkan seluruh tag header <h2> berwarna merah, maka tinggal menggunakan CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bagian head:

2. Membuat seluruh tag header <h3> juga berwarnamerah

Kita tinggal menambahkan kode CSS seperti contoh <h2> sebelumnya :

Namun CSS memiliki cara yang lebih efisien jika yang kita inginkan adalah style yang sama untuk kedua tag. Kita bisa menggabungkan kode CSS diatas menjadi:

Tanda koma “,” sebagai pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna merah. Tidak ada batasan seberapa banyak selector yang bisa digunakan. Katakan kita ingin seluruh tag header dari <h1> sampai <h6> bewarna biru, maka kode CSSnya adalah:

3. Membuat seluruh tag <strong> yang berada di dalam tag <p> berwarna biru

Jika yang kita maksud adalah seluruh tag <strong> dimanapun tag tersebut berada, maka kode CSSnya cukup sebagai berikut:

Namun kode CSS tersebut akan membuat seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h1> akan berwarna merah. Sehingga, jika ditambahkan syarat hanya untuk tag <strong> yang berada di dalam tag <p>, maka kita harus menulis selector CSS menjadi:

Maksud dari kode “p strong” adalah seluruh tag <strong> yang berada di dalam tag <p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. (Selector: p strong, berbeda pengertiannya dengan selector: p, strong).

4. Seluruh tag <h2> yang memiliki class judul, dan seluruh tag yang memiliki class paragraf menjadi italic (huruf miring)

Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah:

h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut.