S Cascading
Style
Sheets
Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit – Kalimantan Tengah Internet Multimedia
Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web Akses web lebih cepat di-loading (mempercepat pembacaan HTML) Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang Ringan pada filesize/ bandwidth lebih kecil Dapat digunakan pada semua web browser
Perbandingan jika menggunakan CSS Jika ingin merubah tulisan menjadi berwarna merah misalnya, kita harus menuliskan coding
Jika ingin membuat text berwarna merah lagi maka kita akan menuliskan lagi
setiap kali kita ingin merubah font-nya
Jika menggunakan CSS, kita cukup membuat selector untuk p(paraghraph) maka otomatis tampilannnya sama dengan sifat tag p hanya ditambahkan perubahan warna, seperti berikut : p{ color: red; } Panggil dengan cara ketikkan :
Text Warna Merah
Jika ingin membuat warna merah lagi tinggal panggil tag
di awal setiap teks yang ingin dirubah
Penulisan CSS ditandai dengan script <style> Penulisan CSS bisa diletakkan di head atau di body, atau pun di file terpisah sendiri. Contoh : <style type="text/css"> p{ font-family: Comic Sans Ms; font-size: 18px; } i { font-family: sans; color: blue; }
DAFTAR FACEBOOK
Nama
Untuk membuat text berwarna merah, bercetak tebal dan bergaris bawah, maka coding CSS-nya :
p{ color: red; font-weight: bold; text-decoration: underline; } Untuk membuat text h1(heading1) dibuat dengan warna biru dan jenis tulisan Futura Md BT, maka coding CSS-nya : h1{ color: blue; font-family: Futura Md BT; }
Background Attachment Berfungsi untuk mendefinisikan cara penampilan sebuah background gambar. Mengatur gambar layar, apakah ikut bergerak jika scroll kita gerakkan ke atas maupun ke bawah, nilainya ada dua yaitu fixed dan scroll. Background Color Berfungsi untuk mengubah latar belakang sebuah halaman • Background Image Berfungsi untuk mengubah latar belakang sebuah halaman dengan gambar • Background Position Berfungsi untuk mengatur letak sebuah gambar yang dihasilkan. Nilai properti background position bisa berupa : Left/ Right / Center sedangkan nilai yang kedua bisa berupa Top/middle/bottom • Background Repeat Berfungsi untuk mengatur perulangan gambar. Nilainya bisa berupa Repeat-y, repeat-x, no-repeat
Background body { background-image : url(‘images.jpg’); Background-repeat: no-repeat; Background-attachment: fixed; Background-position: center middle; }
ID dan Class ID dan Class dalam CSS digunakan jika ingin memberikan lebih dari satu jenis style pada suatu tag html. Dengan adanya id dan class ini kita dapat membrikan style masingmasing pada suatu kolom atau paragraf tertentu. ID ditandai dan selalu diawali dengan tanda pagar (#) sedangkan class selalu ditandai dengan tanda titik (.).
ID dan Class #menu { background: blue; }
.intro { font-family: tahoma; font-size: 20px; font-weight: bold; color: yellow; }
