Anatomi CSS dan Contohnya

Anatomi CSS dan Contohnya - Pada artikel sebelumnya saya telah membahas tentang pengertian css dan fungsinya. Jadi kali ini saya akan membahas kelanjutannya, yakni tentang anatomi atau bagian-bagian dari CSS dan contoh CSS sederhana.

Bagian-bagian utama dari CSS terdiri dari tiga bagian yaitu, Selector, Property, dan Value. Jika pada HTML ada Tag yang menyusun sebuah dokumen HTML, maka di CSS kita sebut dengan Selector. Oke berikut bagian-bagian dari CSS serta penjelasan singkatnya.

Selector
Merupakan nama yang diberikan untuk style yang berbeda, baik yang bersifat internal maupun eksternal. Selector sendiri juga bisa diartikan bagian elemen HTML yang akan ditunjuk untuk mengatur style-nya. Ada 2 jenis penggunaan, yakni berupa class (diawali tanda titik) dan ID (diawali tanda pagar).

Property
Adalah sebuah aturan dalam CSS untuk mengatur selector yang digunakan. Property bisa kita ibaratkan sebagai artibute pada HTML, dan property memiliki sebuah nilai yang disebut Value. Dalam penulisannya, property ditulis di dalam tanda { } (kurung kurawal) setelah nama selector.

Value
Tentu saja merupakan nilai dari sebuah property di CSS, nilainya hampir sama dengan HTML. Contohnya seperti 100px, 10%, 2.4em, dan sebagainya.

Nah dari penjelasan diatas, dapat kita simpulkan bagaimana rumus penulisan sebuah CSS. Jadi kalau ditulis, jadinya seperti gambar di bawah ini:

Kemudian dari rumus tersebut bisa kita jadikan tumpuan untuk menuliskan sebuah dokumen CSS. Contohnya css sederhana ini, sama seperti rumus yang kita pakai diatas

.tombol { background: #0000FF; border: none; color: #FFFFFF; }

Penjelasan

• .tombol merupakan nama selector yang kita berikan, dia menggunakan class (karena diawali dengan titik).
• background, border, color, merupakan property yang kita gunakan dalam mengatur sebuah selektor. Sebetulnya dalam CSS itu ada lebih dari 50 property, tapi saya kasih yang sederhana dulu. Background mengatur warna latar belakang, border mengatur garis tepi, dan color mengatur warna teks.
• #0000FF & #FFFFFF merupakan nilai hex dari warna biru dan putih yang menjadi value dari masing-masing property-nya, sedangkan none mengartikan bahwa tidak ada border, namun itu juga merupakan salah satu value dari property.

Akhirnya selesai juga, semoga bisa dipahami dan menambah pengetahuan kita semua. Saya mohon maaf jika agak sulit dipahami, itu juga karena materi dari ibu guru saya yang panjang saya rangkum agar lebih singkat. Apabila ada pertanyaan silahkan ditanyakan lewat kolom komentar di bawah. Nantikan postingan selanjutnya saja kalau masih penasaran dengan yang namanya CSS. Oke karena saya sudah capek mau tidur, sekian untuk anatomi css dan contohnya.

Tweet