Dalam pembelajaran CSS kali ini, saya akan membahas CSS 3 merupakan versi terbaru yang masih dikembangkan oleh W3C. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan. Dengan adanya CSS mempermudahkan pengaturan dan pemeliharaan sebuah website dan tampilannya karena CSS memisahkan antara bagian mengatur gaya dan isi dari web.
1.Anatomi dari Cascanding Style Sheet
- Bagian-bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu
- Selector, merupakan nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun eksternal, dan hal ini merupakan bagian elemen HTML yang akan ditunjuk untuk mengatur style, yang dapat berupa class dan ID.
- Property, merupakan aturan dalam CSS untuk mengubah selector yang dipilih, property mempunyai nilai yang disebut dengan value, dan biasanya properties berada didalam tanda {..}.
- Value, merupakan nilai dari property CSS.
CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi kedalam tiga bagian yaitu: Selector, Property, Value.
Selector { Propety : Value : }Contoh penggunaan selector, property, dan value untuk mengatur style
Form { margin-left:0:}2.Cara kerja Cascanding Style Sheet
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style ( Selector, ID, dan Class), maka secara otomatis style tersebut akan bekerja pada dokumen HTML . Pendefinisian style bisa dilakukan pada tag <style>. Didalam pasangan tag tersebut, Pendefinisian style dilakukan dengan bentuk Selector {…} . Dalam hal ini, selector bisa berupa selector HTML. Selector kelas, Selector ID.
- Selector HTML
nama-elemen {...} img { margin-top : 10px: float: left:} - Selector Kelas
.nama-class {...} .kotak { Border : Solid } - Selector ID
# id {...} # inggris {font-weight : bold : font-size : 1,2 em :}
3. 3 Cara penerapan pada CSS
- Inline Style Sheet, cara penulisannya cukup dengan menambahkann atribut style=”…” dalam tag HTML tersebut. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <p> </p> atau paragraf.
<p align = "center" style"color :#303; font-size :2px"> Aditya </p>
Saat penulisan CSS diatas, listing kode CSS angsung dipasang di tag HTML.
- Embeded Style Sheet, CSS diidentifikasi terlebih dahulu dalam tag <style>…..</style> diatas tag <body> , lebih tepatnya didalam tag <head>.
<style> input btn {.....}Dibagian body terdapat penerapann CSS dengan cara memanggil nama class nya.
- External Style Sheet,
<input type= "submit" value="login" class"btn" on click =parent.location ="Home_IF Frame.htm />
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut.
Dan hal berikutlah yang bisa saya sampaikan , semoga bermanfaat bagi anda yang sedang belajar dalam pemprograman CSS.
Leave a Reply