1
CSS (Cascading Style Sheets)
TUJUAN PEMBELAJARAN
- Mahasiswa dapat mengetahui dan memahami tentang teori tentang CSS dan cara kerja CSS.
- Mahasiswa dapat mengetahui dan memahami tentang dasar-dasar sintak, property, dan value (nilai).
- Mahasiswa dapat mengetahui dan memahami tentang Grouping, Class, Id Selector, dan Komentar.
- Mahasiswa dapat mengetahui dan memahami tentang Pseudo Class dan Peeudo Element.
MODUL 3
Manajemen Informatika Politeknik Pos Indonesia | Pemrograman Web | Oleh: Supono
2
Pengertian
Cascading Style Sheet (CSS) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Dengan Metode CSS keseluruhan warna dan tampilan yang ada di situs web dapat dirubah/diformat ulang dengan cepat. Sebgai ilustrasi, HTML diibaratkan adalah orang dan CSS yang membuat orang tersebut menjadi tampil cantik atau tampan dengan menggunakan pakaian yang bagus, perhiasan, make-up dan sebagainya. Itulah fungsi dari CSS membuat web kelihatan cantik.
Fungsi CSS Ada beberapa maanfaat menggunakan CSS, antara lain :
1. Mempersingkat penulisan tag HTML Kita tidak perlu mendefinisikan setiap tag dengan properti dan nilai yang sama.
2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan penulisan
3. Mudah dan cepat dalam maintenance web Dikarenakan file CSS yang dibuat secara terpisah, maka anda tidak perlu merombak semua elemen atau properti dalam HTML, cukup mengedit file CSSnya saja.
4. Melakukan apa yang tidak bisa dilakukan oleh HTML Misal : memberikan warna pada input box atau scrollbar
5. Satu kali membuat perintah css atau file css, bisa dipakai oleh lebih dari satu halaman web site atau file HTML
Struktur Penulisan CSS
Penulisan CSS terdiri dari 2 (dua) bagian, yaitu Selector dan Declaration.
Selector berfungsi untuk memberi tahu browser bahwa pada elemen mana rule CSS diterapkan
Selelctor dapat berupa elemen HTML, selector class atau selector id
Manajemen Informatika Politeknik Pos Indonesia | Pemrograman Web | Oleh: Supono
3
Declaration merupakan aturan CSS yang diterapkan, terdiri dari property dan value
Selector
Pada CSS, terdapat 3 macam selector, yaitu ID, class, dan tag HTML.
Declaration
Mendeskripsikan property dan value
Contoh:h1
{
color : #blue;
}
Keterangan :
Selector : h1
Properti : color
Value : blue
Penulisan CSS
Penulisan CSS dibagi menjadi 3 yaitu Eksternal CSS, Internal CSS dan Inline CSS.
1. Eksternal CSS
External CSS adalah sebuah document atau file yang hanya berisikan kode-kode CSS, extensi file css biasanya “.css”. External CSS ini terpisah dari file HTML, untuk itu di butuhkan sebuah perintah untuk menghubungkan atau memanggil External CSS pada file HTML.
Manajemen Informatika Politeknik Pos Indonesia | Pemrograman Web | Oleh: Supono
4
Contoh :
Sebelumnya kita membuat file css terlebih dahulu dengan nama file “test.css”. Cara pemanggilannya terdapat di : href=”test.css”
2. Internal CSS
Internal CSS adalah kode-kode css yang dipasang didalam file HTML.
Contoh :
3. Inline CSS
Inline CSS merupakan cara pemasangan kode CSS yang langsung ditulis pada tag HTML.
Contoh :
Internal CSS
Eksternal CSS
Style Menggunakan CSS