Materi CSS
CSS merupakan
salah satu dokumen
website yang bertujuan
untuk mengatur gaya (style) tampilan website.
Beberapa manfaat
dari penggunaan CSS
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
- Ukuran file menjadi lebih kecil sehingga load file lebih
cepat.
- Mudah untuk mengubah tampilan, hanya dengan mengubah file
CSS
- Dapat digunakan dalam hampir semua jenis web browser.
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan
CSS 2 didukung
seutuhnya oleh CSS
3 dan tidak
ada perubahan
Anatomi CSS terbagi
ke dalam tiga bagian yaitu: selector, property, dan value.Selector{ Property :
value; }
Cara kerja CSS
dimulai saat deklarasi style yang diinginkan dengan
menulis style
(selektor, id dan class)
Format penulisan
CSS dengan Selector HTML adalah Nama-elemen
Format penulisan
CSS dengan Selector class adalah .nama-class { … }
Format penulisan
CSS dengan Selector id adalah #id { … }
Penerapan CSS pada
sebuah halaman web dapat dilakukan dengan
beberapa alternatif
di antaranya adalah: inline style sheet, embedded style sheet, external style
sheet.
Agar lebih menarik,
mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat
diberikan sytle dalam kemasan CSS.
Pengaturan style
tersebut meliputi banyak properti, diantaranya color, direction,
letter-spacing,line-height, text-align,text-decoration, textindent,
text-shadow, text-transform, unicode-bidi, vertical align,whitespace,
word-spacing
Format penulisan
untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut :
selector {color:nilai warna}
Format penulisan
CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai
berikut selector { letter-spacing:nilai spasi;}
Format penulisan
CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector
{text-decoration : nilai text-decoration }
Format penulisan
CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai
berikut selector { word-spacing:nilai spasi;}
Format penulisan
untuk pengaturan jarak indentasi text adalah sebagai berikut selector { text indent:nilai
indent}
. Format penulisan
CSS untuk pengaturan text indent adalah sebagai berikut selector {
text-transform:nilai text transform}
format penulisan
CSS dengan text-shadow adalah Selector {text-shadow: koordinatX koordinatY
nilaiWarnaTeksBayangan ;}
Format penulisan
CSS untuk text alignment selector {text-align:nilai textalign;}