CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.
CSS (Cascading stylesheet) CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah. Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya. CSS adalah aset sangat berharga dalam Disain Web Site
CSS Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel. Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS
Sejarah CSS 1996, Konsorsium W3C 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) 1998, W3C menyempurnakan CSS awal dengan membuat standar CSS2 yang menjadi standart hingga saat ini.
Kapabilitas CSS Mengatur ukuran baku ( exact point ) teks Menambahkan indentasi/tabulasi teks Mengatur margin Menambahkan elemen format baru pada halaman web Menggunakan unit ukuran yang presisi seperti inchi dan centimeter Membuat style baru yang kreatif pada halaman web kita
Merubah tampilan standar dari sebuah tag Mengatur secara presisi bagaimana background image ditampilan, apakah perlu berulang ( repeated ) atau no-repeated Menambahkan jarak antar huruf, jarak antar kata maupun spasi antar baris, Membuat layout halaman web yang standar sehingga dapat ditampilkan sama pada semua jenis browser, termasuk pada browser media tertentu seperti pada PDA dll
STYLE Style merupakan corak/mode/gaya yang diberikan pada suatu elemen dari dokumen (html) Secara default semua komponen sudah mempunyai style standar ( template ) Misalnya tag mempunyai style: Font : Times New Roman; Size : 6 (24pt); Text Decoration : Bold; Line- height = 24pt; –INI JUDUL DENGAN H1 STANDAR
Style Sheet Kita dapat melakukan modifikasi dari style default sesuai keinginan kita Modifikasi style dapat dilakukan secara tunggal per halaman, atau menggunakan file terpisah ( style sheet ) Style sheet merupakan tempat dimana kita mengontrol dan memanage style- style yang ada.
Implementasi CSS CSS dapat ditambahkan dalam halaman web kita dengan 3 cara: 1. Inline CSS : menulis style langsung pada tag HTML 2. Embedded CSS : menulis CSS di dalam bagian HEAD sebuah dokumen HTML 3. External File CSS : menggunakan file CSS terpisah
STYLE FORMAT selector { property1: value; property2:value,...} H1{ color:green; background- color:orange} Style terdiri dari dua bagian: 1. Selector : Bagian pertama sebelum tanda “{ }” disebut selector (TAG atau ELEMEN HTML) 2. Declaration : property dan nilainya.
INLINE STYLE Style pada Tag tunggal: langsung menambahkan modifikasi style dalam tag tersebut. Misalnya :
EMBEDDED STYLE Style dipisah dan dikumpulkan pada bagian HEAD Contoh: body { color:#ffffff; background:black; font-family:Verdana, Arial; font-size:12px; } p { line-height:20px; } h1{ color:brown; }
STYLE SCRIPT (GROUP) Modifikasi Style dapat digunakan secara bersama oleh beberapa tag: Misalnya : H1, H2, H3 { FONT-FAMILIY: Verdana;} P, TD, BODY { LINE-HEIGHT: 20px; MARGIN- RIGHT:20px; MARGIN-LEFT: 10px; }
STYLE SCRIPT (CLASS) Modifikasi Style dapat digunakan secara bersama oleh beberapa tag. Menggunakan CLASS atau ID Misalnya : H1.GREEN { COLOR: GREEN;} #GREEN { COLOR : #33FF33; FONT-WEIGHT: BOLD } NORMAL HEADER A DARK GREEN HEADER LIGT GREEN, BOLD HEADER ANOTHER DARK GREEN
External File CSS Sama seperti embedded style tetapi dibuat pada file terpisah dengan ekstension.css Sebuah dokumen bisa menggunakan lebih dari satu file CSS Di- import (dipanggil) pada bagian HEAD Ada dua cara: 1. " style.css ";</style
Komentar dalam Style Sheets Comments biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan: /* isi Comments */ Contoh: H1 { color:blue;} /* H1 elements akan menjadi biru */ Tags.H1.color = “blue”; /* H1 menjadi biru */
USER DEFINED STYLE Style yang kita definisikan sendiri, selain dari TAG standar yang ada. Kita menentukan nama dan isi / format style nya Contoh txtData { LINE-HEIGHT: 20px; MARGIN- RIGHT:20px; MARGIN-LEFT: 10px; } strTanggal { COLOR : #33FF33; FONT-WEIGHT: BOLD }
& style dapat digunakan dengan memakai tag kontainer dan Digunakan secara inline Tag ini biasanya berfungsi untuk meng- override style yang sudah ada sebelumnya
METRICS Dalam CSS metrics yang digunakan adalah: –Inchi : IN –Milimeter : MM –Centimeter : CM –Picas : PC –Pixel : PX –M-length : EM –X-height : EX
Penggunaan CSS saat ini Kontrol aspek visual keseluruhan halaman website Membuat Layout yang standart (kolaborasi dengan XHTML) Teknik membuat layout HTML: Frame cara lama, jarang digunakan Tabel disukai oleh designer CSS metode baru, menjadi standar
Layout: CSS vs TABEL ItemTabel basedCSS based Ukuran fileBesarKecil FleksibilitasKurang fleksibel, perubahan isi sering kali mengharuskan perubahan layout Sangat fleksibel Kemudahan dalam desain Sangat mudahRelatif lebih sulit AccessibilitySulit digunakan dengan peralatan non- konvensional (screenreader, text-based browser) Mudah dibaca dengan berbagai device
Referensi HTML & CSS CSS-1: CSS-2: HTML: XHTML:
Referensi Shengili-Roberts, Keith.,” Core Cascading Style Sheet ”, Prentice Hall, New Jersey, Nurhasyim, “ HTML & CSS”,
TUGAS Modifikasi website personal dari tugas web pribadi sebelumnya menambahkan CSS (gunakan link sheet) Cek validitas code, sertakan hasil validasinya!