Belajar CSS Kode Dasar Untuk Pemula Tahap 2

  • 3 min read
  • Jun 27, 2020
Hosting Unlimited Indonesia

CSS (Cascading Style Sheets), adalah bahasa khusus yang diperuntukkan untuk memberikan gaya pada tampilan tag HTML(Hypertext Markup Language). Kita telah pengertian CSS dari artikel yang pertama. Kita juga telah mengetahui terdapat 3 jenis cara penulisan CSS. Yakni inline, internal, dan external. Agar kamu dapat memahaminya lebih jelas. Silahkan lihat kembali artikel sebelumnya. Lihat.

Seperti yang diketahui, CSS memiliki 4 bagian, yakni selector, declaration, property, dan value. Artikel ini akan membahas bagian CSS yang pertama, yakni selector. Dari pedoman yang admin gunakan, ada 16 jenis selector. Namun yang paling umum untuk dipelajari sebagai ada 5 bagian. 5 bagian itu adalah universal selector, element selector, class selector, id selector, attribute selector.

Kita akan mempelajari 5 bagian dasar tersebut. Selebihnya kamu dapat mempelajarinya di buku referensi admin.

Universal Selector

Arti kata dari universal, adalah umum, berlaku untuk semuanya. Bila dijadikan sebagai selector, maka pengaturan property yang ditulis berlaku untuk semua tag. Cara menuliskan selector ini sangatlah mudah. Cukup dengan menuliskan *. Berikut adalah contohnya;

Struktur dari kode di atas akan menghasilkan warna (teks) menjadi putih dengan latar belakang hitam. Perhatikan skrip di bawah ini.

Ini adalah hasilnya..

Hasil Universal Selector

Karena universal selector berlaku untuk umum, maka jenis selector lain, akan mengikuti pengaturan pada universal selector. Kamu dapat memodifikasi skrip nomor 2 dengan menambahkan selector lain seperti ini;

Meskipun tag P telah kita atur agar menghasilkan warna hijau, namun tetap saja hasilnya akan putih. Ini dikarenakan universal selector memiliki kekuatan yang lebih.

Element Selector

Kita sebenarnya telah mempraktekkan jenis selector ini pada artikel yang pertama. Kita juga telah mempraktekkan kembali pada skrip ketiga di artikel ini. Ya, tag p yang menjadi selector, adalah jenis element selector. Selector ini adalah jenis selector yang paling umum dijumpai. Cara menuliskannnya sungguh mudah..

Berikut adalah contoh skripnya.

Skrip di atas akan memberikan latar belakang putih pada semua bagian yang berada di tag div. Heading 1, akan berwarna biru, dan tag p akan berubah dengan gaya latar belakang hitam, dengan tulisan berwarna putih.

Hasil element selector

Class Selector

Selector ini dapat berjalan dengan pada tag, apabila tag yang ingin diatur propertinya diberikan atribut tambahan berupa class dengan nama yang sama. Untuk dapat menuliskannya sebagai selector, maka perlu diawali dengan tanda titik. Perhatikan contoh skrip di bawah ini;

Semua tag yang berada dalam ruang lingkup tag div, akan memiliki warna putih dengan latar belakang hitam.

Hasil class selector

Untuk menuliskan nama class sebagai atribut pada tag html, maka perlu diberi tanda “”. Jika ingin menuliskan nama class lebih dari 2 kata, maka gunakan tanda -.

ID Selector

Pengertian id selector hampir sama dengan class selector. Perbedaannya hanya nama atribut saja. Id selector menggunakan atribut bernama id. Untuk dapat menuliskannya sebagai selector, maka digunakan tanda # . Perhatikan contoh skrip di bawah ini;

Sebagai catatan, 1 tag html hanya dapat memakai 1 nama atribut id. Oleh sebab itu, nama yang diberikan untuk atribut pada tag html lain haruslah berbeda.

Atribut Selector

Selector ini hampir sama dengan 2 jenis selector sebelumnya. Perbedaannya, pada sifatnya. Atribut selector dapat digunakan pada seluruh atribut, atau global. Berikut adalah beberapa contoh penggunaan atribut selector;

Berikut penjelasan makna 4 skrip di atas;

  1. Semua tag yang memiliki atribut href akan berubah menjadi kuning.
  2. Semua tag li yang memiliki atribut title akan berubah menjadi hijau
  3. Element atau tag mempunyai atribut href bernilai www.lautanit.com” akan berubah menjadi biru
  4. tag yang mempunyai atribut punya kata website akan menjadi putih. ¬ (tilde) digunakan untuk mencari kata.

Ini adalah contoh dalam skrip htmlnya.

Hasilnya sebagai berikut;

Hasil atribut selector CSS
Hasil atribut selector

Kesimpulan

Selector yang terdapat pada CSS ada 16 jenis. Namun yang paling sering digunakan adalah 5, yakni universal, element, class, id dan atribut. Setiap atribut memiliki karakteristik dan cara penulisan yang berbeda-beda. Pada universal selector, ditulis dengan menggunakan lambang *. Sedangkan class dan id ditulis secara berturut menggunakan lambang . dan #. Khusus untuk tag id, penulisannya sebagai atribut pada tiap tag html haruslah unik atau berbeda.

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 *