Cascading Style Sheet CSS digunakan oleh penulis maupun
- Slides: 25
Cascading Style Sheet
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) u. CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. u. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah. u. Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya.
CSS u. Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel. u. Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. u. Satu file CSS (*. css) dapat digunakan untuk banyak halaman. Sehingga perubahan
Sejarah CSS u 1996, Konsorsium W 3 C merekomendasikan penggunaan CSS dalam dokumen web. u. Tujuannya untuk mengurangi adanya TAG baru untuk format tampilan web. (karena saat itu Netscape dan IE ingin mengembangkan TAG sendiri) u 1998, W 3 C menyempurnakan CSS awal dengan membuat
Kapabilitas CSS u. Mengatur ukuran baku (exact point) teks u. Menambahkan indentasi/tabulasi teks u. Mengatur margin u. Menambahkan elemen format baru pada halaman web u. Menggunakan unit ukuran yang presisi seperti inchi dan centimeter u. Membuat style baru yang kreatif pada halaman web kita
u. Merubah tampilan standar dari sebuah tag u. Mengatur secara presisi bagaimana background image ditampilan, apakah perlu berulang (repeated) atau no-repeated u. Menambahkan jarak antar huruf, jarak antar kata maupun spasi antar baris, u. Membuat layout halaman web yang standar sehingga dapat ditampilkan sama pada semua jenis browser, termasuk pada browser media tertentu seperti pada PDA udll
STYLE u. Style merupakan corak/mode/gaya yang diberikan pada suatu elemen dari dokumen (html) u. Secara default semua komponen sudah mempunyai style standar (template) u. Misalnya tag <H 1> mempunyai style: Font : Times New Roman; Size : 6 (24 pt); Text Decoration : Bold;
Style Sheet u. Kita dapat melakukan modifikasi dari style default sesuai keinginan kita u. Modifikasi style dapat dilakukan secara tunggal per halaman, atau menggunakan file terpisah (style sheet) u. Style sheet merupakan tempat dimana kita mengontrol dan memanage style-style yang ada.
Implementasi CSS u 1. 2. 3. CSS dapat ditambahkan dalam halaman web kita dengan 3 cara: Inline CSS: menulis style langsung pada tag HTML Embedded CSS: menulis CSS di dalam bagian HEAD sebuah dokumen HTML External File CSS: menggunakan file CSS
STYLE FORMAT u u u selector { property 1: value; property 2: value, . . . } H 1{ color: green; backgroundcolor: 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 u u Style pada Tag tunggal: langsung menambahkan modifikasi style dalam tag tersebut. Misalnya : <P STYLE =“FONT-SIZE: 12 pt; FONTFAMILIY: COURIER; FONT-VARIANT: NORMAL; COLOR: NAVY; ”> <H 1 STYLE=”color: red; fontsize: 18 pt”> <BODY STYLE=“FONT-SIZE: X-LARGE”>
EMBEDDED STYLE u. Style dipisah dan dikumpulkan pada bagian HEAD u. Contoh: <head> <style> body { color: #ffffff; background: black; font-family: Verdana, Arial; font-size: 12 px; } p { line-height: 20 px; } h 1{ color: brown; } </style> </head>
STYLE SCRIPT (GROUP) u. Modifikasi Style dapat digunakan secara bersama oleh beberapa tag: u. Misalnya : <HEAD> <STYLE> H 1, H 2, H 3 { FONT-FAMILIY: Verdana; } P, TD, BODY { LINE-HEIGHT: 20 px; MARGIN-RIGHT: 20 px; MARGIN-LEFT: 10 px; } </STYLE>
STYLE SCRIPT (CLASS) Modifikasi Style dapat digunakan secara bersama oleh beberapa tag. Menggunakan CLASS atau ID u Misalnya : u <HTML> <HEAD> <STYLE> H 1. GREEN { COLOR: GREEN; } #GREEN { COLOR : #33 FF 33; FONT-WEIGHT: BOLD } </STYLE> </HEAD> <BODY> <H 1>NORMAL HEADER</H 1> <H 1 CLASS=“GREEN”>A DARK GREEN HEADER</H 1> <H 1 ID=“GREEN”>LIGT GREEN, BOLD HEADER</H 1> <H 1 CLASS=“green”>ANOTHER DARK GREEN</H 1> </BODY> </HTML>
External File CSS u u 1. 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: <link
Komentar dalam Style Sheets u. Comments biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, u. Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan: /* isi Comments */ Contoh: H 1 { color: blue; } /* H 1 elements akan menjadi biru
USER DEFINED STYLE u. Style yang kita definisikan sendiri, selain dari TAG standar yang ada. u. Kita menentukan nama dan isi / format style nya u. Contoh <STYLE> txt. Data { LINE-HEIGHT: 20 px; MARGINRIGHT: 20 px; MARGIN-LEFT: 10 px; } str. Tanggal { COLOR : #33 FF 33; FONTWEIGHT: BOLD }
<SPAN> & <DIV> ustyle dapat digunakan dengan memakai tag kontainer <SPAN> dan <DIV> u. Digunakan secara inline u. Tag ini biasanya berfungsi untuk meng-override style yang sudah ada sebelumnya
METRICS u. 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 u. Kontrol aspek visual keseluruhan halaman website u. Membuat Layout yang standart (kolaborasi dengan XHTML) Teknik membuat layout HTML: u. Frame cara lama, jarang digunakan u. Tabel disukai oleh designer
Layout: CSS vs TABEL Item Ukuran file Tabel based Besar CSS based Kecil Fleksibilitas Kurang fleksibel, Sangat fleksibel perubahan isi sering kali mengharuskan perubahan layout Kemudahan Sangat mudah Relatif lebih sulit dalam desain Accessibility Sulit digunakan dengan Mudah dibaca peralatan nondengan berbagai konvensional device (screenreader, text-based
Referensi HTML & CSS u. CSS-1: http: //www. w 3. org/TR/CSS 1 u. CSS-2: http: //www. w 3. org/TR/CSS 2 u. HTML: http: //www. w 3. org/TR/html 41 u. XHTML: http: //www. w 3. org/TR/xhtml 11
Referensi u. Shengili-Roberts, Keith. , ”Core Cascading Style Sheet”, Prentice Hall, New Jersey, 2000. u. Nurhasyim, “HTML & CSS”, http: //www. ilmukomputer. com,
TUGAS u. Modifikasi website personal dari tugas web pribadi sebelumnya menambahkan CSS (gunakan link sheet) u. Cek validitas code, sertakan hasil validasinya!