PROGRAMMING Bab 5, Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk pengembangan website kurang lebih pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML, Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca Jayar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. Setelah CSS distanderisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language, Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.PROGRAMMING Pengertian CSS CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan, Fitureitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan. Keuntungan Menggunakan CSS CSS memberikan keseragaman pada halaman web. Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web, Anda hanya perlu membuat perubahan dalam style sheet. CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah, Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. \ CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.a font-weight:bold } Gambar 5.1 Selector, Property dan Value pada CSS 5.1.1 Selector Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam css. Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag

’, atau “cari seluruh tag HTML yang memilki atribut class="warning”” atau "cari seluruh link yang ada di dalam tag

". Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, , ‘A1, I dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. 5.1.2 Property Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML, CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. Jika selector digunakan misalnya untuk “mencari seluruh tag

", maka property adalah "efek apa yang ingin dimanipulasi dari tag p tersebut', seperti ukuran text, warna text, jenis fontnya, dll.PROGRAMMING 5.1.3 Value Value CSS adalah nilai dari property. Misalkan untuk property background- color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white. 5.2 Penempatan Sebuah CSS Ada tiga cara untuk menempatkan sebuah CSS ke dalam sebuah halaman web, ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang diingkan. 5.2.1 Inline Style Sheet CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur stylenya dan menjadi bagian dari body. Penulisan style ditakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur sstylenya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen. Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat_mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan jnfine style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi. 5.2.2 Embedded Style Sheet ‘Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur sstyle-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag ) dengan menambahkan tag