Transcript pertemuan 2

CSS
CASCADING STYLE SHEETS
Zaenal Abidin
Pendahuluan
 Diskripsi:
 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 HTMLnya.
 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
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/cssframework.html)
Kelebihan
 Lebih cepat
 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.