MODUL 4 Cascading Style Sheet (CSS)

Desain Web
MODUL 4
Cascading Style Sheet (CSS) Lanjut
A. TUJUAN
1. Mampu memahami CSS dalam HTML
2. Mampu menggunakan CSS dalam class HTML
3. Mampu membuat desain web menggunakan CSS
B. PETUNJUK
1. Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan
2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar
3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur
4. Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas
C. DASAR TEORI
CSS pada desain web merupakan aturan-aturan yang digunakan dalam membentuk suatu
user interface. Penambahan kode CSS pada kode HTML dapat dilakukan melalui 3 (tiga) cara,
yaitu: inline, embedded, dan linked. Penambahan kode CSS menggunakan tag style disebut
dengan inline. Pada metode inline, kode CSS kita tambahkan langsung pada suatu elemen. Kode
CSS tersebut hanya berlaku untuk elemen tersebut.
Untuk menambahkan kode CSS yang bisa berlaku untuk beberapa elemen sekaligus, maka
kita bisa menambahkannya melalui attribute class. Penambahan class ini memerlukan kita untuk
menulis suatu rangkaian kode CSS pada wadah tersendiri. Wadah tersebut bisa kita sematkan
langsung pada file HTML kita (embedded), atau bisa kita tulis pada file terpisah untuk kemudian
kita panggil melalui file HTML kita (linked).
D. LATIHAN
1. Bukalah aplikasi teks editor
2. Tuliskan kode dasar HTML
Sabian | STKIP PGRI TULUNGAGUNG
1
Desain Web
Simpan sebagai index.html
3. Sisipkan kode berikut pada head:
4. Sisipkan kode berikut pada body:
Sabian | STKIP PGRI TULUNGAGUNG
2
Desain Web
5. Jika kode benar, maka tampilannya sebagai berikut:
6. Tambahkan lagi kode pada body menjadi seperti berikut:
7. Jika kode benar, maka tampilannya sebagai berikut:
Metode di atas adalah penambahan CSS menggunakan metode embedded. Kumpulan class
ditulis pada tag style di dalam head, kemudian dipanggil dalam elemen menggunakan
attribute class. Suatu class bisa dipanggil oleh beberapa elemen sekaligus. Penulisan class
pada style selalu diawali dengan tanda . (titik), dan kode CSS di dalamnya diapit oleh tanda
kurung kurawal { }
Sabian | STKIP PGRI TULUNGAGUNG
3
Desain Web
8. Selanjutnya, bukalah jendela text editor baru, kemudian sisipkan kode berikut:
Simpan sebagai style.css, taruh dalam satu folder dengan index.html
9. Kembali ke index.html, sisipkan kode berikut pada head:
10. Kemudian ubah kode pada body menjadi seperti berikut:
Sabian | STKIP PGRI TULUNGAGUNG
4
Desain Web
11. Jika kode benar, maka tampilannya sebagai berikut:
Metode di atas adalah penambahan CSS menggunakan metode linked. Kumpulan class
ditulis pada file lain berekstensi .css, kemudian dipanggil dalam HTML menggunakan tag link
pada head, kemudian dipanggil pada elemen menggunakan attribute class.
Pada dasarnya metode linked sama dengan metode embedded, perbedaannya hanya terletak
pada tujuan. Metode embedded bisa menghemat penggunaan file, tetapi file HTML akan
menjadi berukuran besar karena semua kode menjadi satu. Di sisi lain, metode linked
membutuhkan beberapa file, tetapi lebih mudah untuk dikelola dan file HTML berukuran lebih
kecil.
E. TUGAS
Desainlah suatu tampilan web seperti berikut menggunakan CSS:
Sabian | STKIP PGRI TULUNGAGUNG
5