Turorial CSS by Bayu

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )
Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com
INTRODUKSI
"Cascading Style Sheet" atau sering disebut CSS. Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Metode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). Bagi anda yang baru dalam bidang ini jangan khawatir, karena memang tutorial ini sangat mendasar, tetapi setidaknya sudah menguasai dasardasar HTML. Sekarang coba perhatikan contoh penulisan TAG HTML, di bawah ini
<HTML> <HEAD> </HEAD> <BODY> P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>? <P> J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B> </BODY> </HTML>
Nah, seperti yang anda lihat beberapa huruf pada kalimat-kalimat di atas menjadi BOLD (tebal), karena fungsi dari tag <B> dan </B> adalah untuk menebalkan huruf. Lihat kembali catatan-catatan atau tutorial-tutorial untuk membuat HTML anda. Sekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu? Katakan saja kita ingin mewarnainya dengan hijau? Mungkin. Kebanyakan kita akan buat listing kodenya seperti ini :
<HTML> <HEAD> </HEAD> <BODY> P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatu pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan beneran menjadi<B><FONT COLOR="Lime"> lebih mudah </FONT></B>? <P> J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti </FONT></B> terhadap <B><FONT COLOR="Lime">diri kita sendiri </FONT></B> </BODY> </HTML>
Bagaimana hasilnya di browser? Huruf yang ditebalin sekarang sudah berwarna "hijau", sekarang coba bandingkan kemudahan yang didapat jika kita menggunakan Style-Sheet.

<HTML> <HEAD> <STYLE TYPE="text/css"> B { color : lime } </STYLE> </HEAD> <BODY> P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ? <P> J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B> </BODY> </HTML>
Kedua contoh di atas terlihat persis sama di browser, jadi apa untungnya buat kita? masih belum paham? Jika anda menggunakan style-sheet maka listing code anda setidaknya akan lebih mudah dibaca dan di atur. Keuntungan yang kedua, kita dapat melakukan ini dimana saja dan kapan saja.
KETENTUAN MENDASAR
Sampai saat ini anda sudah dapat melihat kehebatan dan kemampuan yang dimiliki Style Sheet, mari kita kembali berkutat dikubangan untuk mengingat aturan dasar yang ada dalam css ini. Pada contoh di atas, baris ini!
B {color: lime}
dikenal sebagai "Style Rule" atau peraturan/perintah css, yang mana terdiri dari dua elemen dasar yaitu : "selector" dan "declaration" . sebuah "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma, Pasti bingung? Lihat contoh!
B {color: lime; text-decoration: underline; font-family: Arial}
ini baru dapat kita katakan sebagai css yang valid. Lengkapnya :
<HTML> <HEAD> <STYLE TYPE="text/css"> B {color: lime; text-decoration: underline; font-family: Arial} </STYLE> </HEAD> <BODY> P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>? <P> J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita

sendiri</B> </BODY> </HTML>
css sendiri memiliki lebih dari enam-puluh keywords (kata-kunci), dan anda akan seringsering bergaul dengan mereka seiring dengan pemahaman tutorial ini. Selectors juga dapat di kelompokkan, seperti contoh di bawah, yang mengubah teks untuk H1, H2, dan H4, menjadi berwarna putih.
H1, H2, H3 {color: white} /* this rule turns H1, H2 and H3 blocks white */
Sebagai catatan, anda juga dapat memasukkan komentar didalam blok komentar /* dan */. Hal yang paling umum dalam memasukkan kode Style Sheet dengan menggunakan tag <STYLE>, tag <STYLE> ini selalu tampil dalam bagian <HEAD> dari dokumen anda, garis besarnya seperti ini :
<HEAD> <STYLE TYPE="text/css"> ... aturan-aturan css disini ... </STYLE> </HEAD>
Banyak orang menyukai penggunaannya - adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda. Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja. dan hasilnya akan di refleksikan pada keseluruhan dokumen HTML yang
dilink ke situ.
Anggap saja anda mempunyai Style-Sheet yang diberi nama "global.css" yang diletakkan pada server "www.situskamu.com/global.css". Untuk memberikan pengaruh aturan StyleSheet kesemua atau ke spesifik dokumen HTML, gampangnya tambahkan saja kode sederhana ini di dalam tag <HEAD> pada dokumen HTML anda, seperti ini :
<HEAD> <LINK REL="stylesheet" HREF="http://www.situskamu.com/global.css" TYPE="text/css"> </HEAD>
dan semua aturan Style-Sheet dalam "global.css" secara automatis akan diterapkan kedalam dokumen HTML yang ingin diberi Style-Sheet. Kamu juga dapat mengimport Style-Sheet dengan menggunakan keyword (kata-kunci) "@import", lihat dibawah ini:
<STYLE TYPE="text/css"> @import url(http://www.situskamu.com/global.css); P {color: yellow} </STYLE>
kamu juga dapat menerapkan aturan CSS berdasarkan "case to case", dengan menambahkan atribut CSS ke dalam kode HTML itu sendiri. Contoh :
<HTML> <HEAD> </HEAD> <BODY> P: Mengapa jika kita anggap <B STYLE="color: lime; backgroundcolor: black"> suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi <B STYLE="color: lime; background-color: black"> lebih mudah</B>? <P> J: Karena itu merupakan <B STYLE="color: lime; backgroundcolor: black">sugesti</B> terhadap <B STYLE="color: lime; background-color: black">diri kita sendiri</B> </BODY> </HTML>
BEBERAPA ATRIBUT CSS

Shorthand Property CSS Pemakaian Shorthand Property dalam CSS dimaksudkan untuk mempersingkat penulisan code CSS. Beberapa properti yang terdapat dalam satu kategori dapat ditulis dalam satu properti. Hal ini tentu saja dapat mempercepat penulisan CSS dan meminimalkan filesize. Sebagai contoh penerapan CSS Shorthand Property, dapat kita lihat dibawah:
p { font-family: Arial, Helvetica, Sans-Serif; font-size: 11pt; font-style: normal; }
dapat kita singkat menjadi:

p { font: normal 11pt Arial, Helvetica, Sans-Serif; }
CSS Shorthand Property ini dapat kita terapkan pada background, font, margin dan padding, border, dan list.
Background
Pada background, CSS Shorthand Property memiliki sintaks sebagai berikut:
background: background-color | background-image | background-repeat | background-attachment | background-position
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) contoh:

.garis_bawah { background: #EFEFEF url('images/background.jpg') repeat-x fixed top; }
Font
Sintaks:
font: font-style | font-variant | font-weight | font-size | line-height | font-family
contoh:
p { font: bold 11px Arial, Helvetica, Sans-Serif; } dalam sorthand property, kita juga bisa nambahin line-height contoh: font: 11px/20px Arial,verdana,sans-serif; tapi ini ga berfungsi dengan baik di ie. caranya tinggal tambahkan dibawah ini: font:11px/20px Arial,verdana,sans-serif; height:auto !important; height:20px;
margin dan padding

Sintaks:
margin: margin-top | margin-right | margin-bottom | margin-left padding: padding-top | padding-right | padding-bottom | padding-left
Contoh:
.left { margin: 11px 12px 30px 20px; padding: 11px 12px 30px 20px; }
Supaya memudahkan mengingat, saya biasa menganalogikannya dengan putaran jarum jam yang selalu dimulai dari jam 12 (top). Untuk margin dan padding, ia memiliki perbedaan, dimana ia bisa dideklarasikan dengan lebih sederhana lagi: Sintaks:
Margin: margin-top = margin-right = margin-bottom = margin-left
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) contoh:

.left { margin: 15px; }
berarti, untuk margin atas, kanan, bawah, dan kiri memiliki value 15px. Sintaks:
margin: margin-top = margin-bottom | margin-right = margin-left
contoh:
.left { margin: 15px 20px; }
berarti, margin atas dan bawah 15px, sedangkan margin kiri dan kanan 20px; Sintaks:
margin: margin-top | margin left = margin right | margin bottom .left { margin: 15px 20px 30px; } berarti, margin atas 15px, margin kiri dan kanan 20px, dan margin bawah 30px. bersambung
ATRIBUT CSS LAINNYA

Melanjutkan kembali konsep dasar yang sudah dipelajari : pewarisan (inheritance), kelas (classes), pseudo-element, dan selectors-kontekstual (Contextual Selector). Inheritance (Pewarisan): Pada tutorial ini saya bayu akan mencoba temen-teman untuk memahami penggunaan inheritance pada css, Berdasarkan artinya, inheritance atau pewarisan adalah sifat pengaturan properti yang dimana ia diterapkan pada sebuah tag, maka tag-tag lain yang berada diantara tag (atau dalam hirarki) tersebut akan memiliki sifat yang sama pula. Coba perhatikan penulisan code css berikut :
.container { font-family: Arial, Verdana, Helvetica; font-size: 12px; font-weight: bold; color: #000; }

.boxkanan { font-family: Arial, Verdana Helvetica; font-size: 12px; font-weight: normal; color: #FFF;
Kedua Kode Di atas di terapkan dalam TAG Berikut :

<div class="container "><div class="boxkanan"> Teks dalam Kotak </div></div>
Bila Inheritance kita pergunakan, maka penulisan CSS dapat kita persingkat menjadi:
.container { font-family: Arial, Verdana, Helvetica; font-size: 12px; font-weight: bold; color: #000; } .boxkanan { font-weight: normal; color: #FFF;
} .container merupakan parent dari .boxkanan, maka bila terdapat properti dari .boxkanan yang sama parentnya sebaiknya tidak usah ditulis karena secara otomatis tag yang berada di bawah hirarki tag lain yang didefinisikan akan memiliki sifat yang sama. Dalam hal ini, font-family: Arial, Verdana, Helvetica; font-size: 12px; yang telah dimiliki .container secara otomatis telah dimiliki pula oleh .boxkanan. Inheritance berlaku tidak hanya pada tag yang memiliki class atau ID tetapi berlaku pula pada tag HTML yang tidak memiliki class atau ID. Hal ini merupakan keuntungan lain yang dapat kita manfaatkan. Tag HTML diatas dapat kita singkat menjadi:
<div class="container "><div>Teks dalam Kotak </div></div>
dan pada CSS dapat kita tulis:

.container { font-family: Arial, Verdana, Helvetica; font-size: 12px; font-weight: bold; color: #000; }

.container div{ font-weight: normal; color: #FFF;
} Bila mana terdapat tag lain didalam tag HTML diatas seperti:
<div class="container "><div>Teks dalam Kotak <span>Background</span> <p>Teks lainnya</p> </div></div>
Kita tidak usah mendefinisikan setiap tag baru dengan memberi pengenal seperti ID atau Class, cukup parentnya saja. Sekali lagi, yang Anda perlukan hanya mengedit CSS nya.
.container { font-family: Arial, Verdana, Helvetica; font-size: 12px; font-weight: bold; color: #000; } .container div{ font-weight: normal; color: #FFF;
}
.container div span { background: #efefef; } .container div span p { font-size: 10px; font-weight: normal; }
Efisiensi dapat kita lakukan bila kita menggunakan inheritance pada CSS dengan baik. Classes CSS juga mengijinkan kita untuk menyatukan elemen-elemen secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Sebagai contoh :
<HTML> <HEAD> <STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jika kita anggap suatu pekerjaan itu mudah

maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT> terhadap diri kita sendiri </BODY> </HTML>
Kali ini kita mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini kita bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan kita. Pseudo-Element pseudo-element :before dan :after adalah sedikit sulap CSS yang berguna untuk memasukkan konten sebelum dan sesudah sebuah elemen. Konten yang ditambahkan via properti content ini juga bisa jadi semacem div cadangan yang bisa diberi styling dengan bebas. Bisa diberi padding, border, background suka-suka lo lah! Sayangnya, IE tidak mendukung pseudo-element jadi lebih baik membuka Firefox atau Opera untuk menggunakan artikel ini. Apa Sih Gunanya Pseudo-Elements? Biar lebih jelas coba salin kode dibawah ini dan buka di browser. Atau contoh 1.
body:before { content: "Hello World!!"; display: block; font-size: 5em; text-align: center; }
Masih kegunaan praktis pseudo-element. Mari kita liihat Memasukkan Teks dan Objek Pada dasarnya sih kamu bisa memasukkan string teks apa aja, caranya juga udah bisa kamu lihat di contoh 1. Tapi selain itu kamu juga bisa memasukkan objek lain (gambar misalnya), kamu tinggal memberikan URLnya.
.box:before { content: url(box-top.gif); display: block; ... } .box:after { content: url(box-bottom.gif); display: block; ...

}
Kalo divisualisasikan pseudo-element :before dan :after akan memasukkan konten di bagian ini:
<div class="box"> <BEFORE>box-top.gif</BEFORE> <p>some content...</p> <AFTER>box-bottom.gif</AFTER> </div>
Kode CSS diatas bisa dipake untuk bikin rounded corner tanpa markup tambahan. Liat sendiri hasilnya di contoh 2. Penomeran Otomatis Selain menampilkan teks statis, kamu juga bisa membuat counter atau penomeran otomatis pake fungsi counter(nama). Untuk permulaan kita coba dengan contoh yang simpel dulu: Kita akan menomeri contoh-contoh kode seperti yang akan kamu liat pada contoh 4 dengan label Example 1 , Example 2 , dst.
html { counter-reset: codenum; } .example:before { content: "Example " counter(codenum); counter-increment: codenum; display: block; ... }
semua blok kode pada halaman contoh dibungkus dalem div.example . Bagian ini mungkin perlu sedikit penjelasan. Perhatikan selector kedua, disini saya membuat sebuah counter dengan nama codenum yang diawali teks Example . Trus menjalankan penomerannya pake properti counter-increment. Belum selesai! Properti counter-reset di selector pertama dipake untuk memulai penomeran dari nol (ini sebenernya bug fix untuk Firefox). Dan biarpun secara default penomeran dibuat dengan format angka, tapi diubah jadi bermacam style lain juga bisa. Membuat Daftar Multi-Kolom Sekarang ceritanya kamu harus membuat sebuah daftar urut (memakai tag ol), yang secara visual harus terpisah jadi beberapa kolom. Tapi itu artinya kamu harus memisahnya jadi beberapa daftar dan penomeran tidak akan berurutan. Jadi gimana cara kita menghasilkan efek ini?

html { counter-reset: listnum; } ol li { list-style-type: none; } ol li:before { content: counter(listnum) ". "; counter-increment: listnum; }
Dengan markup pada contoh 5 dan CSS diatas, daftar multi-kolom kita jadi deh! Keren kan? Menampilkan Isi Atribut Tag HTML Ada saatnya kita mau memberikan informasi tambahan tentang sebuah elemen. Contohnya atribut cite dari tag blockquote yang isinya biasanya informasi mengenai sumber kutipan yang sialnya kebanyakan browser ngga menampilkan isinya. Disinilah pseudo-element datang membantu, dengan fungsi attr().
blockquote[cite]:after { content: "Source: " attr(cite); display: block; ... }
Sayajuga pake attribute selector supaya hanya blok kutipan yang punya atribut cite yang diberi styling. Hasilnya liat di contoh 6. Tooltip Dinamis Tanpa JavaScript Tooltip JavaScript? Basi! Cobain tooltip murni CSS ini. Disini kita bermain dengan fungsi attr() untuk menampilkan isi atribut title sebuah link.
a[title]:hover:after { content: attr(title); display: block; width: auto; position: absolute; z-index: 1000; top: auto; left: auto; ... }
Coba liat contoh 7 dan cek sourcenya kalo perlu. Eh, pake Opera aja ya soalnya ancur di Firefox :P
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) Progressive Enhancement Masalah pasti ada. IE 6 jelas ngga ketolong dan developer IE 7 juga udah bilang ngga akan mendukung pseudo-element, jadi protesnya jangan sama gue. Pengguna Safari pada OS X sepertinya juga ngga bisa nikmatin fitur CSS yang satu ini, sori :) Tapi inget aja kalo CSS dan browser-browser open-source seperti Firefox terus berkembang. Yang gue tunjukin disini kadang disebut dengan istilah Progressive Enhancement, ato praktik yang memanfaatkan sepenuhnya kemampuan browserbrowser modern, sementara tetep menjamin pengalaman yang optimal untuk pengguna browser lain. Selektor Kontekstual (Contextual-Selector) Selektor Kontekstual hampir mirip dengan pernyataan-pernyataan kondisional - deklarasi Style-Sheet yang ada akan berpengaruh jika kondisi/keadaan tertentu dijumpai. Sebagai contoh, anggap anda ingin membuat semua teks yang bold dan italic tampil dengan huruf arial dan berwarna biru. Selektor-Kontekstual nya akan seperti ini :
<HEAD> <STYLE TYPE="text/css"> B I {color: blue; font-family: Arial} /* selector ini kesemuanya untuk bold+italic text */ </STYLE> </HEAD>
CSS menawarkan berbagai macam cara untuk mengganti warna. Paling mudah adalah dengan menggunakan salah satu dari pre-defined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Kamu juga dapat menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (tanda kres).
I {color: #0000FF)
Atau nilai kombinasi RGB dalam nilai absolut terhadap persen, seperti ini :
I {color: rgb (0, 0, 255)) I {color: rgb (0%, 0%, 100%))
Kita dapat mengubah kombinasi warna sesuai dengan gaya yang kita sukai.
<HTML> <HEAD> <STYLE TYPE="text/css"> .blue {color: cyan; background-color: #FF8000} .green {color: lime; background-color: black} </STYLE> </HEAD> <BODY> <P CLASS="blue">

Sebenernya semua pekerjaan itu mudah! <P CLASS="green"> Setuju, tapi tak semudah mengatakannya </BODY> </HTML>
WATERMARK CSS juga hadir dengan properties yang mengijinkan anda untuk mendefinisikan cara bagaimana gambar latar (background) anda di tampilkan. Pertama, property background-image mengijinkan anda untuk menetapkan sebuah image background untuk setiap elemen HTML.
.question {background-image: url ("http://www.mysite.com/back.gif")} /*Menampilkan image background dari url*/
Jika anda memerlukan latar belakang ini sebagai watermark, yang tidak dapat discroll ketika anda men-scroll ke bawah suatu halaman, anda harus menambahkan property background-attachment Nilai-nilai yang diterima adalah fixed dan scroll Anda juga dapat mengatur Ya/Tidak nya suatu image/gambar yang melewati satu halaman dengan properti background-repeat . Properti ini dapat diambil satu dari empat bagian : repeat (letak secara horizontal dan secara vertikal), repeat-x (letak secara horizontal saja), repeat-y (letak seacara vertikal saja), dan no-repeat (tidak ada pengaturan letak) Contoh di bawah ini kita ambil untuk menunjukkan keyword repeat-y , silahkan dicoba :
<HTML> <HEAD> <STYLE TYPE="text/css"> .question {font-size: 20pt; background-image: url("http://www.mysite.com/bunga.gif"); background-repeat: repeat-y} </STYLE> </HEAD> <BODY> <P CLASS="question"> Q. Hmm ternyata anda sekarang sudah mengerti tentang konsep watermark? A. Ya, Belum Sepenuhnya lah Pak! </BODY> </HTML>
Perhatikan, url(http://www.situs.com/bunga.gif) mengambil image bunga.gif sebagai background yang diatur secara vertikal Sekarang tugas anda! Buatlah dan gantilah image diatas dengan nilai repeat-x . Perhatikan apa yang berubah? Kalau memang tidak berubah, penulis sarankan anda untuk mengganti image atau gambar anda. Sehingga perbedaannya terasa.
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) CSS Image Replacement Dalam hal Aksesibilitas, HTML memang lebih unggul dari pada penggunaan gambar atau movie Flash, karena HTML berbasiskan teks, search engine dapat dengan baik membaca HTML. Oleh karena itu, penggunaan HTML untuk bagian-bagian yang penting seperti judul utama atau titel sebuah situs sangat dianjurkan. Namun dibalik keunggulan itu, HTML memiliki keterbatasan. Ia tidak memberikan kebebasan penuh pada para desainer untuk menampilkan objek-objek yang akan ditampilkan di Web. Diantaranya adalah logo perusahaan, karena alasan grafis dan tipografi, keberadaan logo yang kebanyakan berupa Image ini tidak dapat begitu saja digantikan oleh teks HTML, dengan kata lain, hal ini berkaitan dengan image perusahaan dan branding (yang satu ini tidak dapat di tawar-menawar dengan klien). CSS menawarkan solusi untuk hal ini, yaitu dengan metode Image Replacement. Titel atau nama sebuah situs yang disimpan dalam sebuah tag heading atau <h1> dapat kita gantikan menggunakan gambar (image) secara visual. Walaupun sebenarnya image bukan menggantikan sepenuhnya dari fungsi titel dalam h1 ini, tapi lebih ke bekerjasama dimana kedua fungsi ini akan saling menggantikan. Image Replacement ini memiliki beberapa metode diantaranya Fahrner Image Replacement (FIR) Diperkenalkan oleh Todd Fahrner, Metoda ini mungkin adalah metode image replacement yang paling terkenal dan banyak digunakan karena kemudahannya. Konsep dari metode ini sangat sederhana, yaitu dengan menyimpan teks dalam tag span diapit oleh tag heading:
<h1> <span>Fourg Core Gear</span> <h1>
Lalu aplikasikan image untuk menggantikan teks sebagai background pada elemen heading.
h1 { background: url(logofourg.gif) no-repeat top left; width: 180px; height: 50px; }
Lalu sembunyikan konten dalam span dengan:

span { display:none; }
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) Metode ini bekerja dengan sangat baik, namun ternyata memiliki metode ini akibat buruk terhadap aksesibilitas. Bila user menon-aktifkan tampilan image pada browser mereka, mereka tidak melihat apa-apa. Selain itu screen reader juga tidak membaca teks yang telah disembunyikan oleh metode ini. Phark Mike Rundle memperkenalkan metode yang lebih screenreader-friendly dan menghindari penggunaan non-semantic tag.
<h1>Fourg Core Gear</h1>
Metode yang dipergunakan Phark tidak membuat teks menghilang, tapi dengan memindahkan teks keluar area browser. Phark memberikan text-indent negatif yang besar,
h1 { text-indent: -5000px; background: url(logofourg.gif) no-repeat top left; width: 180px; height: 50px; }
Screen reader dapat membaca dengan baik teks dalam h1, namun seperti halnya teknik FIR, metode ini tidak akan bekerja bila tampilan image tidak diaktifkan di browser karena keterbatasan bandwidth dan akses yang lambat. VARIASI DALAM CSS Variasi Font Arial Bosan dengan huruf Arial ? Terkadang saya sendiri berfikir, kapan dunia Web akan seperti dunia cetak dimana kita bebas menggunakan font apa saja tanpa kendala. Tips ini mungkin akan bermanfaat untuk Anda yang menginginkan font dengan tampilan berbeda namun tetap standard. Idenya sangat sederhana, mengatur Arial hanya dengan CSS. Karakter Arial Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px. Normal Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil)
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px. Variasi 1 Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px. Teks diatas menggunakan Arial dengan ukuran huruf 11px, perbedaannya, ia ditampilkan dengan menggunakan properti "letter-spacing: 1px;"
.arial { font-size: 11px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 1px;
} Variasi 2 Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px. Teks diatas menggunakan Arial dengan ukuran huruf 12px, disini ia ditampilkan dengan menggunakan "letter-spacing: -1px;" dan "word-spacing: 3px"
.arial { font-size: 12px; font-family: Arial, Helvetica, sans-serif; letter-spacing: -1px; word-spacing: 3px; }
Variasi 3 Arial memiliki keterbacaan yang baik pada ukuran 12 pixel atau setara dengan 9 Point atau 0.8em. Kurang dari ukuran 12px Arial akan terkesan kurus dan rapat hingga akan mempersulit dibaca. Arial sangat baik ditampilkan pada situs-situs resmi (berupa profil) yang tidak terlalu banyak menggunakan teks. Bila pilihan ternyata jatuh pada Arial untuk teks, gunakan jarak baris yang lebih besar dari standar, dan minimal ukuran huruf adalah 11px.
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) Variasi 3 ini cocok untuk menggantikan Verdana sebagai caption atau footnote, ukuran yang dipergunakan pada variasi ini adalah 10px, dan diberikan ketebalan "font-weight:
bold;" .arial { font-size: 10px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
Variasi 4 Variasi ini saya pergunakan pada judul/header Design World, ia menggunakan:
h2 { font-weight: bold; font-size: 14pt; font-family: Arial, Helvetica, Sans-Serif; text-transform: uppercase; letter-spacing: -1.8pt; }
Nampak berbeda bukan? Saya pernah menggunakan beberapa variasi diatas untuk beberapa desain situs yang pernah saya buat, beberapa rekan kerja bertanya: Itu font apa sih? , Eh itu pakai font Lucida atau Tahoma? (Variasi 1), Web kok pakai Arial Narrow, kan nggak standard (Variasi 2), untuk variasi 3 banyak yang mengira itu Verdana, Arial Black emang cocok buat judul ya? (Variasi 4). Dukungan Browser pada CSS Sebelum memulai membuat layout Web menggunakan CSS, kita terlebih dahulu harus mengetahui dan merumuskan tingkat dukungan browser terhadap CSS yang akan dipergunakan, hal ini berguna untuk memperkirakan bagaimana tampilan pada browserbrowser berbeda. Situs maxdesign.com.au mendeskripsikan, terdapat 3 tingkat dasar dukungan browser terhadap layout Web: Browser Lama: Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, dll. Browser Masakini: Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5, dll. Browser Modern: Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6, etc. Tingkat Dukungan Pada situs maxdesign.com.au, dideskripsikan pula tingkat dukungan browser pada CSS.
KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) Full CSS Support: Browser dapat mengenali semua perintah CSS dan menampilkannya dengan baik. Bila Anda ingin menampilkan dukungan CSS Full pada browser lama anda harus menggunakan CSS dasar dan menghindari Positioning CSS yang rumit. Partial CSS Support: Beberapa perintah CSS tidak didukung oleh browser-browser yang dipergunakan. Hal ini berarti browser tidak dapat menampilkan layout secara akurat, tapi tetap akan manmpilkan layout pada CSS yang didukung. Unstyled Content: Semua perintah CSS tidak di tampilkan. Browser ?Browser Modern Browser Kini Full CSS support Full CSS support Full CSS support Partial CSS support Browser Lama Full CSS support Partial CSS support Unstyled content Unstyled content
Opsi 1. Full CSS support Opsi 2. Full CSS support Opsi 3. Full CSS support Opsi 4. Full CSS support
Tabel diatas adalah opsi-opsi yang ingin dipergunakan dalam membuat layout CSS. Opsi 1 berarti kita harus menggunakan CSS yang sangat dasar hingga dapat ditampilkan dengan baik pada berbagai browser, demikian pula dengan opsi 2, 3, dan 4. Tiap opasi yang kita gunakan dalam menggunakan perintah CSS dapat kita pilih sesuai dengan kebutuhan audiens Anda, bagaimanapun, tiap opsi memiliki kelebihan dan kekurangan masing-masing.
Berikut beberapa sumber tulisan : http://designworld.master.web.id ( Pupung Budi Permana , dkk ) Tutorial CSS oleh Abe Poetra MAX DESIGN ( www.maxdesign.com.au )

Turorial CSS by Bayu

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Turorial CSS by Bayu

Diunggah oleh

Hak Cipta:

Format Tersedia

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

BEBERAPA ATRIBUT CSS

dapat kita singkat menjadi:

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) contoh:

margin dan padding

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet ) contoh:

ATRIBUT CSS LAINNYA

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Kedua Kode Di atas di terapkan dalam TAG Berikut :

dan pada CSS dapat kita tulis:

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Lalu sembunyikan konten dalam span dengan:

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

KUMPULAN TUTORIAL CSS ( Cascading Style Sheet )

Dikumpulkan dan di salin ulang : Haryo Bayu ( 021-93670574) / www.haryobayu.info / bayumaster@yahoo.com

Anda mungkin juga menyukai