CSS Cascading Style Sheets Zaenal Abidin

Pendahuluan Diskripsi: Tujuan: Pengenalan Konsep CSS dan Framework CSS.  Tujuan: Mahasiswa dapat memahami konsep CSS, dan implementasi CSS. Mampu menggunakan framework guna memudahkan dalam pembuatan sebuah web. Membuat sebuah web statik

KONSEP DASAR. CSS merupakan kepanjangan dari Cascading Style Sheet yaitu suatu dokumen yang digunakan untuk melakukan pengaturan halaman web.

Apa itu CSS : CSS singkatan dari Cascading Style Sheets Styles didefinisikan bagaimana manampilkan elemen HTML Styles umumnya disimpan ke dalam Style Sheet Styles ditambahkan HTML untuk membantu pekerjaan External Style Sheets dapat membantu banyak pekerjaan ExternalStyle Sheet disimpan dalam CSS files Multiple Style dapat didefinisi banyak jendela menjadi satu

Keungtungan CSS CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya : Ukuran file lebih kecil Load file lebih cepat Dapat berkolaborasi dengan JavaScript Pasangan setia XHTML Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS. Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.

SINTAKS DARI CSS Penulisan kode CSS dibuat menjadi tiga bagian, yaitu: Ket: Keterangan Selector Bagian pertama sebelum tanda “{}” disebut selector.Selector adalah tag html yang umumnya telah kita diketahui. Declaration Terdiri dari property dan nilainya.Property adalah atribut yang ingin diubah dan tiap property mempunyai nilai/value.

Contoh

Catatan: Jangan ada spasi antara property value dengan unitnya(1). Nama property bersifat case sensitif dan menggunakan huruf kecil. Jika nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai(2) Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property lain(3,5). Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda koma(6).

Ada tiga cara penempatan kode CSS dalam HTML, yaitu : Internal CSS Yaitu menuliskan langsung script CSS di file HTML-nya. External CSS Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css Inline CSS Yaitu penulisan kode CSS dalam tag HTML.

Internal CSS

External CSS

Inline CSS

Class Selector Dengan class selector dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya, dua type paragraph dalam dokumen.Yang satu paragraph align-right dan yang satu paragraph align-center.

Contoh ATAU Pada Halaman HTML

Catatan: Jangan memberi nama class dengan angka. Memberikan kata/kalimat lebih dari satu class, penulisannya adalah

Penggunaan Atribut ID dalam tag Cara memberi nama ID : Dapat mengandung huruf, angka, atau karakter garis bawah Karakter pertama harus berupa huruf atau karakter garis bawah Diawali dengan tanda # Jangan memberi nama id sama dengan value Jangan memberi nama id dengan tag html kemudian diikuti tanda #

Contoh

Adapun beberapa pengaturan penulisan Css untuk elmen yang adalah sbb :

Lanjutan

Framework CSS Twitter Bootstrap (http://getbootstrap.com/) Foundation (http://foundation.zurb.com/) Metro (http://metroui.org.ua/) Pure CSS (http://purecss.io/tables/)

Lainnya Blueprintcss 960.gs Baseline css Elasti css Mollio Yaml Compass Less css Bluetrip 1 kb grid Wedoui Elements css Marker css Sen css

Apa Itu Framework Pengertian dasar dari Framework itu sendiri adalah; sebuah konsep yang memiliki struktur serta terorganisir dalam satu paket atau library. Dengan konsep ini, diharapkan agar desainer dan developer lebih fokus pada projek yang sedang dikerjakannya tanpa harus memulainya dari awal. (http://gigoycaem.blogspot.com/2010/05/css- framework.html)

Kelebihan Lebih cepat Tableless Cross-browser compatibility Membuat sebuah website membutuhkan waktu yang tidak sebentar. Tapi dengan menggunakan Framework kita tidak harus memulai semuanya dari awal untuk setiap projek. Tableless Tableless ini adalah sebuah teknik dimana struktur website tidak menggunakan table untuk melayout, melainkan dengan cara memisahkan data antara html dan css. Hal ini dilakukan agar lebih mudah dimaintenance dan diakses oleh berbagai media aplikasi, berkurangnya kebutuhan bandwidth, dan yang lebih utama adalah lebih SEO friendly. Cross-browser compatibility Cross-browser compatibility ini memiliki pengertian bahwa website dapat diakses oleh berbagai browser.

Team Work menjadi lebih komunikatif Setiap desain dan developer memiliki teknik atau cara yang berbeda-beda. Dengan framwork ini maka kesalahpahaman atau miskomunikasi antar team dapat diminimalisir. Lebih sedikit kesalahan Membuat sebuah website yang besar membutuhkan pengorganisiran kode yang baik dan jelas. Dengan framework, setiap kesalahan akan lebih sedikit dikarenakan sudah ada patokan dari framework tersebut. Kebersihan dan Kerapihan Maksud dari kebersihan dan kerapihan disini adalah; kode menjadi lebih mudah dibaca dan lebih jelas, baik itu oleh kita sendiri maupun oleh team kita.

Kekurangan Membutuhkan waktu untuk mempelajari framework Mempelajari dan membuat CSS Framework menjadi lebih familiar memang membutuhkan waktu. Karena framework adalah buatan orang lain. Berkurangnya fleksibilitas Kebebasan kita dalam mengkoding menjadi berkurang akibat dari sintak yang sudah terpatok. Sehingga setiap projek yang kita buat akan tidak jauh berbeda. Walaupun berbeda, mungkin kesempatannya akan akan lebih kecil. Kode menjadi mubazir Tidak semua kode yang ada pada framework kita gunakan dalam projek kita. Hal ini mengakibatkan code menjadi tidak berguna dan membuat data menjadi besar.

HTTP request yang berlebihan Biasanya CSS framework memiliki data yang terpisah-pisah. Hal ini membuat loading website menjadi lama. Bugs CSS framework adalah buatan manusia yang tidak luput dari kesalahan. Terkadang kita menjadi kesulitan apabila suatu saat kita menemukan sebuah bugs pada CSS framework pilihan kita dan terkadang menjadi kerepotan untuk diperbaiki dan mencari solusinya.