Pengertian Dan Dasar dari CSS

Kali ini saya coba untuk berbagi ilmu yang saya punya dan tentunya semampu saya. Saya hanya ingin membantu khususnya untuk teman saya yang mendapat tugas ini tapi mungkin mereka belum tahu itu CSS dan bagaimana cara penggunaannya.

Sebelum saya lebih jauh ngoceh kesana kemari tentang CSS ada baiknya saya memperkenalkan dulu apa itu CSS.

CSS adalah singkatan dari Cascading Style Sheets atau dalam bahasa Indonesia bisa diartikan sebagai pengendali gaya pada sebuah halaman terutama pada tampilannya sehingga semua halaman seragam.

Fungsi dari CSS sendiri adalah menyeragamkan tampilan dengan mengaturnya dalam sebuah berkas tertentu.

Lalu seperti apa bentuk dari makanan CSS tersebut dan apa saja namanya, mari kita simak satu persatu.

Ketika pertama kali kita melihat CSS tentu bingung apa saja itu nama namanya, boro-boro untuk ngedit ataupun bikin tau saja enggak.

untuk jelasnya silahkan lihat gambar yang saya dapat dari tempat saya belajar 

secara ringkasnya di atas terbagi menjadi dua bagian yaitu:

1. Selector
2. Declaration

 ******

SELECTOR

selektor adalah sebuah elemen HTML yang akan kita atur tampilannya, contoh selektor pada MWB adalah : #Header #Navigation .Post .Comments dan pasukannya.

Dari selektor di atas kalo di amatin ada sedikit perbedaan di awalnya yaitu penggunaan tanda hashtag / pagar ( # ) dan tanda titik ( . ), namun ada juga yang tanpa menggunakan awalan 'kedua' tersebut. nah itu juga sangat berpengaruh pada hasil akhir tampilan karena memang berbeda nama dan penggunaanya.

Tanda ( # ) menunjukan sebuah elemen yang disebut ID kalo dalam HTML ditulis < div id = dengan penggunaan pada sebuah blok tertentu.

Tanda titik ( . ) disebut class dan ditulis < div class = pada HTML yang penggunaanya biasanya pada bagian dalam ID dan mengatur hanya sebagian elemen tertentu saja di dalam ID tersebut.

Sedangkan untuk yang tanpa menggunakan 'kedua' tanda tersebut biasanya digunakan untuk mengatur image ataupun embed lainnya. contoh penggunaanya bisa di lihat pada daleman  HTML aslinya seperti ini :

Arek Gang Papat

by: randi septian

Maka ketika menulis dalam mengkreasikan CSS-nya jadi seperti ini :

#header { property : value ; property : value ; }

.heading { property : value ; property : value ; }

.description { property : value ; property : value ; }

Selanjutnya pada pengaturan selektor harus menggunakan tanda kurung yang bentuknya kriwil " { " di awal serta di tutup dengan " } " sehingga lengkapnya menjadi seperti gambar di atas.

DECLARATION

deklarasi adalah isi dari pengaturan selektor tersebut dan dibagi lagi kedalam dua bagian yaitu PROPERTY dan VALUE. Penulisan deklarasi pada CSS harus menggunakan tanda titik koma sebagai pemisah " ; " dan titik dua " : " sebagai pengarti dari properti ke value.

Hal selanjutnya yang perlu di pahami adalah PROPERTY atau seperti apa akan kita atur elemen tersebut dan VALUE atau nilai yang akan kita atur.

Kemudian value apa saja yang bisa kita atur pada CSS?? Dan jawabannya sangat banyak tergantung bagaimana kreasi desain dan imajinasi kita bekerja tapi secara mendasar value-value tersebut diantaranya adalah :

• Background atau Latar Belakang
• Border atau Pemisah antar elemen baik class maupun ID
• Margin atau jarak keluar sebuah elemen
• Padding atau jarak kedalam sebuah elemen tersebut

Selain ini masih banyak elemen value yang bisa di atur sehingga hasil akhirnya membuat tampilan web kita lebih sedap dipandang mata.

Untuk properti dan value nanti saya akan coba menjelaskannya sesuai kemampuan pengetahuan saya dan untuk para master di bidang ini saya memohon bimbingan berupa saran dan kritik untuk kemajuan kita bersama.

Selengkapnya baca DISINI atau Download file yang sudah pernah saya buat DISINI.

Semoga bermanfaat dan Terima kasih atas kunjugannya...