MODUL 15 BEKERJA DENGAN CASCADING STYLE SHEET

Pada modul ini, Praktikan akan mencoba menggunakan CSS dengan berbagai cara untuk meningkatkan kemampuan dalam memahami CSS.

Pada bab ini Anda akan belajar menerapkan CSS dengan berbagai cara disertai

praktek langsung. Kemudian diakhir percobaan Anda ambil kesimpulan.

15.1 Selektor Untuk Merubah Body

Hasil :

15.2 Selektor Bebas

Hasilnya :

15.3 Selektor Dengan Class

Hasil :

15.4 Selektor Dengan id

Hasilnya :

15.5. Format Margin

Hasilnya :

15.6. Format Margin

Hasilnya :

15.7. Background Campuran

Hasilnya :

15.8. Background Image

Properties Value Keterangan
background-image url Alamat gambar yang dituju
background-repeat repeat Diulang
  repeat-x Diulang sumbu x
  repeat-y Diulang sumbu y
  no-repeat Tampil 1 gbr
Background-position top left Atas kiri halaman
  top center Atas tengah halaman
  top right Atas kanan halaman
  center left Tengah kiri
  center center Pusat
  center right Tengah kanan
  bottom left Bawah kiri
  bottom center Bawah tengah
  bottom right Bawah kanan
  x-% y-% Pakai nilai %
  x-pos y-pos  

Hasilnya :

Melakukan pengulangan background pada sumbu y

Hasilnya :

Hasilnya :

15.9. Format Text

  Properties Value Keterangan
  Pengaturan warna    
  color green, dll  
  Pengaturan Spasi (jarak antar karakter)  
  letter-spacing Normal Ukrn standar HTML
    Length Ukrn panjang(cm,px)
  Perataan Text    
  text-align left  
    right center  
    justify  
  text-decoration none Bentuk standar
    underline Bergaris bawah
    overline Bergaris atas
    line-through Text dicoret
    blink Text berkedip
Properties Value Keterangan
Pengaturan text indentasi  
text-indent length Dengn cm, px
  % Dengan persentase
Pengubahan Bentuk Karakter  
text-transform capitalize  
  uppercase  
  lowercase  

Hasilnya :

15.10. Membuat Menu 3d dengan Eksternal CSS Buatlah file menu.html dengan kode berikut :

Terlihat pada file diatas, memanggil file styleku.css, sekarang dalam folder yang sama buat file css tersebut dengan kode berikut :

Hasilnya :