melakukan pengaturan halaman web.
Apa itu CSS :
CSS singkatan dari Cascading Style Sheets
Styles didefinisikan bagaimana manampilkan elemen HTML
Styles umumnya disimpan ke dalam Style Sheet
Styles ditambahkan HTML untuk membantu pekerjaan
External Style Sheets dapat membantu banyak pekerjaan
ExternalStyle Sheet disimpan dalam CSS files
Multiple Style dapat didefinisi banyak jendela menjadi satu
Menggunakan CSS tidak memerlukan perangkat lunak tertentu karena merupakan script yang telah
embeded dengan HTML. Cukup menggunakan aplikasi seperti note pad, anda sudah mampu
menciptakan script CSS sendiri
Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun
bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets
merupakan kelebihan tersendiri.
Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada.
Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bias
menyebutnya sebagai template dari documents HTML yang menggunakanya.
Anda juga bisa membuat efek-efek sepsial di web anda dengan menggunakan style sheet. Sebagai
contoh anda bisa membuat style sheet yang mendefinisikan style untuk h1
dengan style bold dan italic dan berwarna biru. Atau pada tag yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bias anda lakukan dengan style sheet.
Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada
prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web
Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di
gunakan di web browser.
Pada perkembangannya CSS sudah masuk level 3 untuk sekarang, dimana dimulai CSS level 1 atau
yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level
sebelumnya, yaitu CSS level 1.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai
banyak keuntungan, diantaranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
- Dan banyak lagi yang lainnya.
2. Sintaks dari HTML
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector { property1: value; property2:value, . . .}
H1{ color:green; background-color:orange}
Ket:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector.Selector adalah tag html yang umumnya kamu
ketahui.
2. Declaration
Terdiri dari property dan nilainya.Property adalah atribut yang kamu ingin ubah dan tiap property
mempunyai nilai/value.
Catatan:
Jangan ada spasi antara property value dengan unitnya(1).
Nama property bersifat case sensitif dan menggunakan huruf kecil.
Jika nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai(2)
Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property
lain(3,5).
Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda
koma(6).
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :
1. Internal CSS
Yaitu menuliskan langsung script CSS di file HTML-nya.
Contoh :
Selamat Datang CSS
2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan
file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format
tersebut.Eksternal style ditulis di text editor lain dengan ekstention .css Untuk lebih jelasnya kita
lihat contoh dibawah ini:
Selamat Datang CSS
3. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
Style Menggunakan
CSS
Class Selector
Dengan class selector dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
Misalnya, dua type paragraph dalam dokumen.Yang satu paragraph align-right dan yang satu
paragraph align-center.
Penggunaan atribut class di dalam dokumen html
This paragraph will be right-aligned.
This paragraph will be center-aligned.
Catatan:
Jangan memberi nama class dengan angka.
Memberikan kata/kalimat lebih dari satu class, penulisannya adalah:
This is a paragraph.
CSS Font Properties
Digunakan untuk merubah jenis huruf, ketebalan,ukuran, style dari teks.
Catatan: CSS1 font diidentifikasi oleh font name. Jika browser tidak support font, dapat gunakan
font default.
Contoh:
This is header 1
This is header 2
This is a paragraph
Sekian... bila ada yang kurang jelas silakan tinggalkan pesan. posting ini memang masih kurang dan maaf atas kekurangan tersebut.
