13 CSS ( CASCADING STYLE SHEET II ) Bayangkan jika kita memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap.

Presentasi berjudul: "13 CSS ( CASCADING STYLE SHEET II ) Bayangkan jika kita memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap."— Transcript presentasi:

1 13 CSS ( CASCADING STYLE SHEET II ) Bayangkan jika kita memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah. CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan kita untuk mendesain (style) tampilan dokumen (terutama HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya. Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada di dokumen HTML yang sudah jadi. CSS merupakan fasilitas untuk membentuk suatu format dalam penampilan halaman web pada web browser. Pengaturan tersebut diantaranya meliputi warna, tataletak, jenis huruf, serta aspek lainnya dalam penampilan dokumen. Fasilitas ini sangat membantu bagi para website developer dalam merancang suatu halaman terutama dengan kekonsistenan format dari informasi yang dimunculkan. Di sisi pengunjung suatu halaman web, fasilitas ini akan mempercepat proses pengambilan suatu halaman yang dimunculkan pada web browser karena ukuran jumlah data yang diambil umumnya akan semakin kecil. Cascade Style Sheets merupakan fitur yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Stylesheetmendeskripsikanbagaimantampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari dokumen HTML yang menggunakanya. Anda juga bisa membuat efek-efek spesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk dengan style bold dan italic dan berwarna biru. Atau pada tag yang akan di tampilkan dengan warna kuning dan menggunakan font Hypermedia/Modul12-Cascading Style Sheet http://www.mercubuana.ac.id http://www.mercubuana.ac.id -1-

2 Belajar CSS Jika kita menggunakan Internal CSS, maka kodenya akan menjadi: Belajar CSS h1 { font-family: verdana; } Belajar CSS Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css dan isikan kode berikut: h1 { font-family: verdana; } Sekarang untuk kode HTML tulislah kode berikut ini dan simpan dengan nama coba.html: Belajar CSS Belajar CSS Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag yang diletakkan diantara tag. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu Hypermedia/Modul12-Cascading Style Sheet http://www.mercubuana.ac.id http://www.mercubuana.ac.id -3-

3 Halo dunia Saya mau belajar CSS, ini kode CSS saya yang pertama Terimakasih Hasil: Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSS-nya saja. CSS memiliki ratusan properties dan values. Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut: Serif font Jika anda ingin menampilkan jenis huruf sans-serif gunakan kode berikut: body {Arial, Verdana, Geneva, Helvetica, sans-serif} Jika ingin menggunakan jenis huruf serif, gunakan kode berikut: body {Times New Roman, Times, Georgia, serif} Untuk jenis huruf untuk kode program dapat anda gunakan kode berikut: body {Courier New, Courier, monospace} Hypermedia/Modul12-Cascading Style Sheet http://www.mercubuana.ac.id http://www.mercubuana.ac.id -5-