Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
Tahun : 2008 CSS Pertemuan 12
2
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu : Membuat Web sederhana dengan menggunakan CSS Bina Nusantara
3
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
4
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
5
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
6
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
7
Membuat Internal Style Sheet (cont..)
Bina Nusantara
8
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
9
Membuat External Style Sheet (cont..)
.css file .html file Bina Nusantara
10
Class Selector Dengan menggunakan class selector dapat didefinisikan styles yang berbeda untuk elemen HTML yang sama tipenya. Bina Nusantara
11
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
12
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
13
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
14
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
15
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
16
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
Presentasi serupa
