1. Pengenalan CSS
CSS merupakan kepanjangan dari Cascading Style Sheet yaitu suatu dokumen yang digunakan untuk 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 <P> 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.
Contoh:
1. p {margin-left: 20px}
2. P {font-family:”sans serif”}
3. p {text-align:center;color:red}
4. body{ color:black}
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 :
Yaitu menuliskan langsung script CSS di file HTML-nya. Contoh :
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:
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:
3. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
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.
Contoh:
p.right {text-align: right}
p.center {text-align: center}
atau
.right {text-align: right}
.center {text-align: center}
Penggunaan atribut class di dalam dokumen html
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Catatan:
Jangan memberi nama class dengan angka.
Memberikan kata/kalimat lebih dari satu class, penulisannya adalah:
<p class="center bold"> This is a paragraph.
</p>
Penggunaan Atribut ID dalam tag
Cara memberi nama ID :
Dapat mengandung huruf, angka, atau karakter garis bawah Karakter pertama harus berupa huruf atau karakter garis bawah Diawali dengan tanda #
Jangan memberi nama id sama dengan value
Jangan memberi nama id dengan tag html kemudian diikuti tanda #
CSS Text Properties
Digunakan untuk mengontrol tampilan dari teks, merubah warna teks, penurunan atau kenaikan spasi antara teks, perataan teks, dekorasi teks, pengaturan teks dalam baris dan sebagianya.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. Contoh:
CSS Klasifikasi Properties
Digunakan untuk mengontrol bagaimana tampilan elemen, set dimana gambar, set dimana gambar dapat tampil di semua elemen, posisi elemen relative ke dalam normal, posisi elemen digunakan dalam nilai absolute , dan bagaimana mengontrol tampilan elemen.
