Cara Kerja dan Anatomi Cascading Style Sheet (CSS)

AA Scienes, Cara Kerja dan Anatomi Cascading Style Sheet (CSS) - Tahukah kalian wahai para sobat setia AA Sciences apa itu sebenarnya yang dimaksud dengan Cascading Style Sheet (CSS). Dikali ini Alhamdulillah AA Sciences akan berbagi tentang cara kerja dan anatomi dari Cascading Style Sheet atau biasa yang kerap disebut dengan CSS.

Berikut AA Sciences akan share sedikit materi yakni cara kerja dari anatomi cascading style sheet atau CSS, tentunya hal ini akan menambah sedikit pengetahuan kalian dalam membenah suatu website dalam bentuk style-style nya.

1. Definisi dan Fungsi Cascading Style Sheet (CSS)

Cascading Style Sheet atau yang umum kita dengar dengan istilah CSS adalah salah satu style/gaya bentuk dalam dokumen website yang mana bertujuan dalam rangka mengatur gaya dalam suatu tampilan website.

CSS bukanlah hanya sekedar bahasa pemrograman saja, melainkan sebuah sekelompok aturan yang mana berpotensi dalam mengendalikan beberapa suatu komponen dalam website sehingga akan terlihat suatu website semakin lengkap di dalam kerangka nya, baik itu seperti seragamnya, serta mudahnya dalam memberi settingan ketika hendak mendesain suatu halaman website.

Cascading Style Sheet (CSS) pula merupakan dokumen yang merinci dalam gaya sekitar pembuatan serta pegaturan dalam dokumen website diantaranya seperti: style font, jarak, warna, jenis font, bentuk, type dan hal style lainnya yang mana pada jenis HTML tidak work bila digunakan.

Sehingga, Cascading Style Sheet (CSS) dapat dinyatakan bahwa CSS adalah suatu dokumen yang berjalan dalam pengembangan dari dokumen HTML dalam hal format halaman website tentunya.

Terciptanya dokumen CSS, tentunya memiliki tugas penting untuk membantu kita dalam mempermudah mengatur serta memilih suatu type website sehingga agar website tersebut tampil maksimal dengan bertujuan memikatnya para konsumen yang hijrah pada website kalian dengan adanya style dokumen CSS.

Lantas, mengapa CSS pada umumnya membuat suatu website selalu tampil terlihat lebih terkemuka atau lebih mudah penerapannya?

Semua ini dikarenakan Cascading Style Sheet atau CSS dapat memisahkan antara bagian mana saja yakni presentasi dan isi dalam suatu website yang hendak dibuat tersebut.

Tidak hanya itu juga tentunya, bahkan penggunaan dari CSS dalam penerapan suatu website akan memberikan beberapa manfaat CSS seperti berikut ini :

- Kode/Script HTML akan menjadi lebih ringan serta sederhana dan akan lebih mudah diatur.
-  Ukuran file akan menjadi lebih ringan sehingga proses/loading suatu file atau halaman menjadi cepat.
- Mudah dalam mengubah suatu tampilan, hanya dengan mengubah file CSS saja.
- Dapat berkolaborasi dengan dokumen berbasis Javascript serta merupakan pasangan setia dari dokumen HTML.
- Dapat digunakan dalam hampir seluruh jenis website yang online maupun offline.

2.  Anatomi dari Cascading Style Sheet (CSS)

Bagian-bagian yang paling utama dalam sebuah CSS itu terdapat tiga bagian yakni: selector, value dan property. Jika dalam dokumen HTML biasa dikenal terdapat tag-tag yang mana menyusun suatu dokumen HTML, maka dalam dokumen CSS pun serupa pula dikenal dengan sebutan selector.

Berikut AA Sciences akan memberikan Bagian CSS serta keterangan nya dalam bentuk tabel.

Bagian CSS		Keterangan
Selector		- Nama-nama yang dinamakan dalam style-style yang berbeda, baik itu jenis style internal bahkan style eksternal. - Bagian elemen HTML yang akan ditunjuki dalam rangka untuk mengatur jenis style. - Dapat berupa atribut pemanggil class dan ID.
Property		- Aturan dalam CSS bertugas untuk merubah selector yang hendak dipilih - Property yang memiliki value yang diartikan juga dengan value - Properties yang didalamnya tanda { }
Value		- Merupakan nilai dari property dokumen Cascading Style Sheet (CSS) atau dokumen lainnya,

Cascading Style Sheet (CSS) tentunya memiliki aturan tersendiri terutama dalam pengunaan penulisan sintaks. Penulisan sintaks tercakup 3 bagian jenisnya yakni: selector, value dan property.

Sebagai contoh serta penulisan dari format penulisan CSS nya biasa kerap dituliskan sebagai berikut:

Selector{ Property : value;}

Sebagai contoh agar lebih jelas lagi, berikut sedikit penggunaan dari selector, property serta value untuk mengatur gaya/style dalam suatu form atau dokumen website (HTML/CSS):

Form{ align-left:10}

Dari example penggunaan selector, property serta value diatas tentunya terdapat keterangan-keterangan dalam form atribut CSS diatas, berikut keterangan nya:

- Form: Selector yang hendak disesuaikan dalam penggunaan gaya/style nya
- align-left: property yang bertugas sebagai jarak rata, yang mana sebuah teks diawali dengan rata kiri (align left)
- 10: nilai property dari align-left (rata kiri) yang usai dibuat tersebut.

Tentunya dengan adanya Cascading Style Sheet (CSS) hal itu memungkinkan kita agar lebih untuk menampilkan suatu halaman yang serupa dalam format yang berbeda-beda.

3. Cara Kerja Cascading Style Sheet (CSS)

Cara kerja Cascading Style Sheet (CSS) diawali ketika hendak deklarasi style yang ingin digunakan dengan menulis style/gaya (selector, ID, serta class), maka secara auto pengguna dari style tersebut akan berjalan pada dokumen HTML.

Dengan mengaturnya atribut dari CSS (selector, id dan class), lalu kemudian id dan class tersebut ketika hendak disesuaikan juga diterapkan dalam kode HTML. Dan pada pemrosesan tersebut pula CSS pun dapat bekerja bersamaan dibarengi dalam dokumen HTML untuk menyempurnakan atribut dari dokumen HTML.

Penggunaan style dapat diterapkan pada tag <style>. Pada dalam pasangan tag tersebut, penggunaan style diterapkan dengan dalam bentuk Selector { jenis atribut yang ingin diisi }.

Dalam hal ini, atribut dari selector pun dapat berisi berupa selector berbasis HTML, property, selector ID, atau selector class.

Selector HTML bertugas untuk mendefinisikan style dalam suatu tag HTML. Sebagai contoh dibawah ini akan mencoba menggunakan selectornya yakni berupa selector HTML untuk memunculkan gambar/img, pada umumnya adalah sebagai berikut:

Nama-elemen { jenis atribut yang ingin diisi }: 

Jadi, salah satu contoh penggunaan agar sedikit jelasnya seperti dibawah ini:

Img {Margin-right: 10px; float: center;}

Selektor Class bertugas sebagai atribut kelas yang dapat berlaku dalam sembarang tag HTML, sebagai contoh bentuknya sebagai berikut:

.nama-class { jenis atribut yang ingin diisi }

Jadi, salah satu contoh penggunaan agar sedikit jelasnya seperti dibawah ini:

.kotak { border: 2px; solid: 3px;}

Dan untuk Selector ID bertugas sebagai tools dari CSS yang mendefinisikan style dalam elemen yang memiliki ID yang telah tercantum dalam selector. pemunculan dari Selector ID penulisannya yakni diawali dengan pagar/hashtag (#), contohnya sebagai berikut:

#nama-id { jenis atribut yang ingin diisi }

Jadi, salah satu contoh penggunaan agar sedikit jelasnya seperti dibawah ini:

#aasciences { font-weight: italic; font-size: 2.5em;}

Share this post