Belajar CSS Kode Dasar Untuk Pemula Tahap 3

  • 2 min read
  • Oct 25, 2020
Apa itu CIS dalam CSS
Hosting Unlimited Indonesia

Seri CSS (Cascading Style Sheets) sebelumnya telah membahas 5 jenis selector umum. 5 jenis selector itu adalah universal selector, element selector, class selector, id selector, dan atribut selector. Kali ini admin akan berbagi mengenai cascade, inheritance, dan specificity. Apa kegunaan mempelajari 3 komponen itu dalam CSS ?.

Mari kita cari tau.

Cascade dalam CSS Adalah

Cascade adalah aturan penurunan style dalam CSS. Seperti yang kita ketahui, terdapat 3 cara untuk memasukkan kode CSS dalam HTML, yakni inline, internal, dan external. Tetapi terdapat 2 style yang termasuk ke dalam CSS namun penggunaannya hanya bisa digunakan melalui web browser. style itu adalah web browser style dan style user.

Apa perbedaan keduanya ?

Web browser style adalah style CSS default dari web browser.  Semisal, tag H1 yang menampilkan teks berukuran besar, tag a yang menampilkan teks berwarna biru dan memiliki garis bawah. Style ini dapat diubah dengan CSS reset.

Style user adalah style yang diciptakan oleh user melalui web browser, semisal mengubah ukuran, jenis, warna dari font. Konsep cascade menaruh style user sebagai urutan prioritas diikuti oleh inline style. 

Berikut adalah urutannnya;

  1. Style user
  2. Inline style
  3. Internal dan external style
  4. Web browser style

Jika dalam suatu kode HTML terdapat 3 selector sama dengan jenis style yang sama pula, maka peraturan style paling akhirlah yang akan berlaku, atau last rules apply.

Inheritance Adalah

Inheritance bermakna penurunan, artinya tag yang bertindak sebagai child bisa saja memiliki style seperti tag parent-nya. Artinya ketika kita mengatur tag body untuk berwarna hijau dan tag-tag di dalamnya diberi nilai default, maka tag-tag tersebut akan berubah menjadi warna hijau.

Contoh kode;

Untuk mengakali sifat turunan ini diperlukan tag selector yang bersifat specific di tag child tersebut. Dalam inheritance, last rules apply tidak berlaku. Proses in lebih menekan selector mana yang terdekat .

Specificity Selector

Boleh dikatakan bahwa specificity selector urutan kekuatan selector, semakin spesifik sebuah selector maka semakin kuat atau tinggi nilainya.

Contohnya

Kode di atas akan menghasilkan teks “Apa warna teks ini” menjadi warna hijau. Hal ini disebabkan ID selector, lebih kuat ketimbang Class selector dan tag selector.

Berikut adalah urutan kekuatan masing-masing selector;

SelectorNilai Kekuatan
Inline style1000
ID selector100
Class selector10
Attribute selector10
Pseudo-class selector10
Element/Tag selector1
Pseudo-element selector1
Universal selector0

Kesimpulan

Materi ini sangat penting dipelajari apabila ingin memperdalam ilmu CSS guna mempermudah manipulasi tag HTML. Materi lengkap ada pada sumber referensi yang admin gunakan dari Duniailkom.com. Pantau terus lautanit.com untuk dapatkan informasi teknologi terbaru lainnya ya

sumber :  di bawah

Pratama, Andre. 2017. CSS Uncover Panduan Belajar CSS untuk Pemula.Padang Panjang : www.duniailkom.com

petanikode.com, w3schools.com

Hosting Unlimited Indonesia
Related Post :

Leave a Reply

Your email address will not be published. Required fields are marked *