Cascading Style Sheet Cascading Style Sheet Pendahuluan Konsep

Cascading Style Sheet

Cascading Style Sheet • Pendahuluan • Konsep Dasar CSS • Syntax/Perintah CSS

Pendahuluan Konsep Dasar CSS Syntax/Perintah CSS Implementasi CSS Komponen CSS Properties • Cascading Style Sheets (CSS atau sering disebut dengan stylesheet) adalah suatu teknologi (file) yang berisi kumpulan kode-kode yang berurutan dan saling berhubungan digunakan untuk mengatur format/tampilan halaman website (situs). • Dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs sekaligus memformat ulang tampilan situs. • CSS ini telah distandarkan oleh World Wide Web Consortium (W 3 C) untuk digunakan di web browser.

Sejarah Casacading Style Sheet • 1996, W 3 C merekomendasikan penggunaan CSS dalam dokumen web. Tujuannya untuk mengurangi adanya TAG baru untuk format tampilan web, karena saat itu Netscape dan IE ingin mengembangkan TAG sendiri. • CSS pertama yang muncul adalah CSS level 1, yang mendukung beberapa pengaturan sebagai berikut: – Jenis font dan ketebalan font – Warna, background, dan teks – Posisi teks, gambar, dan lainnya – Margin, border, dan padding • Pertengahan 1998, W 3 C menyempurnakan CSS awal dengan membuat standar CSS 2 yang menjadi standart hingga saat ini. • Saat ini sudah dikembangan CSS level 3.

Fungsi/Keuntungan CSS • Dengan CSS, memungkinkan web developer mendapatkan file web yang lebih kecil. Hal ini karena pengaturan style oleh CSS dibuat secara terpisah dan di import ke dalam file utama. • Kecepatan akses akan lebih cepat. Dengan file web yang lebih kecil, hal ini juga akan berpengaruh terhadap kecepatan akses/membuka halaman situs. • Mempermudah kontrol style dari seluruh halaman website. Dengan menggunakan CSS akan sangat mempermudah mengotrol style dari seluruh halaman web site. Hal ini dikarenakan kita hanya merubah satu halaman untuk merubah seluruh style dari sebuah website.

Fungsi/Keuntungan CSS (Lanjutan) • CSS memungkinkan untuk menyembunyikan content dari browser, tapi masih di index oleh mesin pencari. CSS memungkinkan kita menyembunyikan Content dari halaman website dari browser, tetapi memungkinkan masih dibaca oleh google. Tujuan hal ini, misal kita masih menghendaki sebuah content untuk disembunyikan dari browser, tatapi masih bisa nampak ketika diprint, atau sebaliknnya. • Pengunjung/user yang berbeda dapat memiliki CSS yang berbeda pula. Dengan CSS, kita dapat memberikan tampilan yang berbeda kepada pengunjung/user yang berbeda. <!--[if lt IE 7]><link rel=“stylesheet” href=“file. css” type=“text/css”><![endif]-->

Kekurangan CSS • Tidak semua browser mengartikan kode CSS dengan cara yang sama. Kadang-kadang, tampilan web dengan suatu CSS terlihat baik di browser yang satu, tapi kurang baik di browser yang lain. • Jadi sebagai web developer kita harus memeriksa tampilan situs yang dibuat supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan situs kita terlihat baik di semua browser.

Konsep Dasar CSS • Sebuah style sheet terdiri dari beberapa aturan (rules). • Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). • Dalam satu aturan, dapat ditulis lebih dari satu selector (style group), dan masing-masing selector harus dipisah dengan tanda koma (, ). • Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (; ). • Masing-masing deklarasi terdiri dari property, titik dua (: ) dan nilai (value). • Style sheet dapat diberi komentar (dengan syntax pembuka (/*) dan penutup (*/) untuk mempermudah koreksi. • Segala teks yang ada di dalam komentar tidak akan dibaca sebagai kode.

Syntax CSS <style type=“text/css”> /* komentar */ selector {property: value} /* komentar */ </style> • Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. • Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. • Value adalah nilai dari pengaturannya.

Syntax CSS (Lanjutan) <style type=“text/css”> /* stylesheet pemrograman web oleh Gufron */ I, U {color: red} Rule B {color: green; text-decoration: underline; font-family: Arial} </style> Selector Value Property Declaration Block