CSS Cascading Style Sheets

Presentasi berjudul: "CSS Cascading Style Sheets"— Transcript presentasi:

1 CSS Cascading Style Sheets
Zaenal Abidin

2 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

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

4 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

5 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.

6 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.

7 Contoh

8 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).

9 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.

10 Internal CSS

11 External CSS

12 Inline CSS

13 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.

14 Contoh ATAU Pada Halaman HTML

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

16 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 #

17 Contoh

18 Adapun beberapa pengaturan penulisan Css untuk elmen yang adalah sbb :

19 Lanjutan

20 Framework CSS Twitter Bootstrap (http://getbootstrap.com/)
Foundation ( Metro ( Pure CSS (

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

22 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. ( framework.html)

23 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.

24 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.

25 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.

26 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.