CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design Tahun : 2008 CSS Pertemuan 12
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat Web sederhana dengan menggunakan CSS Bina Nusantara
Outline Materi Definisi Membuat Internal Style Sheet Membuat External Style Sheet Class Selector Id Selector Mendefinisikan Styles untuk Links Memformat Text dengan Styles Tampilan (Layout) dengan Styles CSS Comments Keuntungan Menggunakan Style Sheets Bina Nusantara
CSS Cascading Style Sheets (CSS) adalah mekanisme sederhana untuk menambahkan style (misalnya : fonts, warna, spacing) pada dokumen Web. Syntax : CSS syntax terdiri dari 3 bagian : selector, property dan value. Selector biasanya adalah elemen HTML /tag yang akan didefinisikan, property adalah atribut yang akan diubah, dan setiap property dapat memiliki value. Bina Nusantara
CSS (cont..) Elemen Body akan ditampilkan sebagai text berwarna hitam Contoh : Elemen Body akan ditampilkan sebagai text berwarna hitam Jika value berisi lebih dari 1 kata, berikan quotes pada sebelum dan sesudah nilai value Jika ingin menspesifikasikan lebih dari 1 property, setiap property harus di pisahkan dengan semicolon. Selector dapat digabungkan. Semua elemen header akan ditampilkan dalam text berwarna hijau Bina Nusantara
Membuat Internal Style Sheet Internal style sheets sangat ideal untuk halaman yang bersifat individual dengan banyak text. ISS memungkinkan untuk menempatkan style pada bagian atas halaman untuk digunakan di seluruh halaman HTML Pada bagian atas dokumen HTML, di antara tag <head> dan </head>, ketikkan <style> Ketik nama tag dan properties yang akan didefinisikan Ketik </style> Bina Nusantara
Membuat Internal Style Sheet (cont..) Bina Nusantara
Membuat External Style Sheet External style sheets sangat ideal untuk menampilkan tampilan yang sama untuk semua halaman dalam Situs Web. Jika ingin mengaplikasikan style sheet pada lebih dari satu halaman, lebih baik gunakan external style sheets. Buat dokumen text baru Ketik nama tag dan properties yang ingin didefinisikan Simpan style sheet sebagai Text Only dan berikan .css sebagai ekstension. Untuk menggunakan external style sheet : Pada bagian head dari setiap halaman HTML yang ingin diaplikasikan dengan style sheet, ketik<link rel=“stylesheet” type=“text/css” href=“url.css”> Bina Nusantara
Membuat External Style Sheet (cont..) .css file .html file Bina Nusantara
Class Selector Dengan menggunakan class selector dapat didefinisikan styles yang berbeda untuk elemen HTML yang sama tipenya. Bina Nusantara
Id Selector Style untuk elemen HTML dapat didefinisikan dengan id selector. Id selector didefinisikan dengan sebuah tanda #. Individual tag dapat diidentifikasikan tanpa harus keseluruhan class untuk suatu HTML tag Setiap id pada dokumen HTML haruslah unik. Bina Nusantara
Mendefinisikan Styles untuk Links Warna background dan foreground dari suatu link dapat diubah A:visited untuk mengubah tampilan link yang sudah pernah di kunjungi (clicked) A:active untuk mengubah tampilan link ketika diklik A:hover untuk mengubah tampilan link ketika ditunjuk menggunakan mouse Contoh : Bina Nusantara
Memformat Text dengan Styles Property Description font-family: familyname Menentukan keluarga font font-style: italic/oblique/normal Membuat italics/oblique/normal text font-weight: bold/normal Mengaplikasikan format bold/normal font-size: sizept, e.g., 12pt Mengatur ukuran font line-height: sizept, e.g., 12pt Mengatur ketinggian line color: #rrggbb Mengatur warna text background: #rrggbb Mengatur warna background text text-align: left/right/center/justify Mengatur alignment text text-decoration: underline/overline/line-through/blink/none Menampilkan underline/overline/line-through/blink text Bina Nusantara
Layout dengan Styles Property Description height: size, e.g., 200 Mengatur ketinggian elemen width: size, e.g., 200 Mengatur lebar elemen border-top/bottom/left/right: thin/medium/thick or sizepx Mengatur border padding-top/bottom/left/right: size, e.g., 10 Menambah padding di sekitar elemen margin-top/bottom/left/right: size, e.g., 10 Mengatur margin di sekitar elemen Vertical-align: baseline/middle/sub/super/text-top/text-bottom/top/bottom Mengatur alignement elemen secara vertical Bina Nusantara
CSS Comments Comments digunakan untuk menjelaskan code, dan mungkin membantu untuk memperbaiki source code pada masa yang akan datang. Comment akan di-ignore oleh browsers. CSS comment dimulai dengan "/*", dan diakhiri dengan "*/" Bina Nusantara
Keuntungan Penggunaan Style Sheets Styles menghemat waktu Styles mudah diubah Komputer lebih baik dalam mengaplikasikan style secara konsisten dibanding manusia Styles memungkinkan untuk mengendalikan text yang tidak dapat dikendalikan oleh HTML tags Styles mempermudah pembuatan format umum untuk semua halaman Web Bina Nusantara