CSS Pendahuluan Apakah CSS? CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen Styles umumnya disimpan dalam Style Sheets Styles ditambahkan pada HTML 4.0 untuk menyelesaikan persoalan External Style Sheets dapat menghemat waktu Anda External Style Sheets disimpan dalam file CSS Definisi Multiple style adalah melakukan cascade (bertingkat) ke style lain Style Memecahkan Persoalan Umum Tag HTML pada awalnya dirancang untuk mendefinisikan konten dokumen. Tag-tag ini dimaksudkan untuk mengatakan "Ini adalah header", "Ini adalah paragraf ", "Ini adalah tabel", dengan menggunakan tag-tag seperti <h1>, <p>, <table>, dan lainnya. Layout (tata letak) dokumen dianggap itu urusannya browser, tanpa menggunakan tag-tag pemformatan. Browser kemudian menambahkan tag dan atribut baru (seperti <font> dan atribut color) kepada spesifikasi HTML awal. Hal ini menjadi lebih sulit untuk menciptakan situs Web dimana konten dokumen HTML secara jelas dipisahkan dari layout presentasi dokumennya. Untuk mengatasi persoalan ini, World Wide Web Consortium (W3C) merespon dengan membuat standar HTML maka diciptakan STYLE sebagai tambahan pada HTML 4.0. Sekarang kebanyakan browser mendukung Cascading Style Sheet. Style Sheet Dapat Menghemat Waktu Kerja Styles sheets mendefinisikan BAGAIMANA elemen HTML ditampilkan, untuk menggantikan tag font dan atribut color dalam HTML 3.2. Style umumnya disimpan dalam file.css terpisah. Style sheet external mengijinkan Anda untuk mengubah kemunculan dan layout dari seluruh halaman dalam Web, hanya dengan mengedit satu dokumen CSS. CSS adalah terobosan dalam perancangan Web karena ia mengijinkan pengembang mengontrol style dan layout satu kali dari sejumlah halaman Web. Anda dapat mendefinisikan style untuk setiap elemen HTML dan menggunakannya untuk banyak halaman Web selama Anda inginkan. Untuk membuat perubahan global, secara sederhana ubah style, dan semua elemen dalam Web akan di update secara otomatis. Multiple Style akan meng-cascade kedalam Style Lain Style sheet mengijinkan informasi style dikerjakan dengan beberapa cara. Style dapat diletakkan didalam sebuah elemen HTML, didalam elemen pada halaman HTML, atau dalam file CSS eksternal. Bahkan sejumlah style sheet eksternal dapat diacu didalam dokumen HTML tunggal.
Style apa yang akan dipakai pada saat lebih dari satu style ditulis untuk elemen HTML? Secara umum kita dapat katakan bahwa semua style akan "meng-cascade" kedalam style sheet "virtual" baru dengan mengikuti hukum dengan prioritas mulai yang paling rendah: 1. Browser default 2. External style sheet 3. Internal style sheet (didalam tag ) 4. Inline style (didalam elemen HTML) Jadi, inline style (didalam elemen HTML) mempunyai prioritas tertinggi, yang berarti bahwa ini akan menimpa style yang dideklarasikan didalam tag, dalam external style sheet, atau dalam browser (nilai default). Catatan: Jika link style sheet eksternal diletakkan dibawah style sheet internal dalam tag, style sheet eksternal akan menimpa style sheet internal. Sintaks CSS Sintaks CSS disusun atas tiga bagian: selector, property and value: selector property: value Selector umumnya elemen/tag HTML yang Anda definisikan, property adalah atribut yang akan Anda ubah, dan setiap property dapat mempunyai value (nilai). Property dan value dipisahkan oleh tanda titik dua (:), dan diapit oleh kurung kurawal: body color: black Catatan: Jika value terdiri atas sejumlah kata, apitlah dengan petik ganda: p font-family: "sans serif" Catatan: Jika Anda akan menentukan lebih dari satu property, Anda harus memisahkan setiap property dengan tanda titik koma. Berikut contoh bagaimana mendefinisikan paragraf rata tengah, dengan warna teks merah: p text-align:center;color:red Untuk membuat definisi style mudah dibaca, Anda dapat menuliskan satu property pada tiap baris, seperti ini: p text-align: center; color: black; font-family: arial
Pengelompokan Anda dapat mengelompokkan sejumlah selector. Pisahkan setiap selector dengan koma. Dalam contoh di bawah kita telah mengelompokkan semua elemen header. Semua elemen header akan ditampilkan dalam warna teks hijau: h1,h2,h3,h4,h5,h6 color: green Selector kelas Dengan selector kelas Anda dapat mendefinisikan style berbeda untuk tipe elemen HTML berbeda. Misalnya Anda ingin mempunyai dua tipe paragraf dalam dokumen: satu paragraf rata kanan, dan satu lagi paragraf rata tengah. Anda dapat mengerjakannya dengan style: p.right text-align: right p.center text-align: center Anda harus menggunakan atribut kelas dalam dokumen HTML Anda: <p class="right"> Ini adalah paragraf dengan rata kanan. <p class="center"> Ini adalah paragraf dengan rata kanan. Catatan: Untuk menggunakan lebih dari satu kelas per elemen yang diberikan, sintaks menjadi: <p class="center bold"> Ini adalah paragraf. Paragraf di atas akan diberi style dengan kelas "center" DAN kelas "bold". Anda juga dapat mengabaikan nama tag dalam selector untuk mendefinisikan style yang akan dipakai oleh semua elemen HTML yang mempunyai kelas tertentu. Dalam contoh berikut, semua elemen HTML dengan class ="center" akan dibuat rata tengah:.center text-align: center Dalam kode di bawah baik elemen h1 maupun elemen p mempunyai class="center". Ini berarti kedua elemen akan mengikuti aturan dalam selector ".center": <h1 class="center"> Heading ini dibuat rata tengah
</h1> <p class="center"> Paragraf ini juga dibuat rata tengah. JANGAN memulai nama kelas dengan bilangan! Ini tidak bekerja dalam Mozilla/Firefox. Menambahkan Style kepada Elemen dengan Atribut Khusus Anda juga dapat menggunakan style kepada elemen HTML dengan atribut khusus. Aturan style dibawah akan mencocokkan semua elemen input yang mempunyai atribut type dengan nilai "text": input[type="text"] background-color: blue Selector id Anda juga dapat mendefinisikan style untuk elemen HTML dengan selector id. Selector id didefinisikan dengan #. Aturan style dibawah akan mencocokkan elemen yang mempunyai atribut id dengan nilai "green": #green color: green Aturan style dibawah akan mencocokkan elemen p yang mempunyai id dengan nilai "para1": p#para1 text-align: center; color: red JANGAN memulai nama ID dengan bilangan! Ini tidak akan bekerja pada Mozilla/Firefox.
Komentar CSS Komentar dipakai untuk menjelaskan kode, dan bisa membantu saat Anda mengedit kode sumber pada waktu lain. Komentar akan diabaikan oleh browser. Komentar CSS dimulai dengan "/*", dan diakhiri dengan "*/", seperti ini: /* Ini adalah komentar */ p text-align: center; /* Ini adalah komentar yang lain*/ color: black; font-family: arial Bagaimana menyisipkan Style Sheet Pada saat browser membaca style sheet, ia akan memformat dokumen sesuai dengan stylenya. Ada tiga cara menyisipkan style sheet: Style Sheet Eksternal Style sheet eksternal paling cocok digunakan untuk banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan keseluruhan situs Web dengan hanya mengubah satu file. Setiap halaman harus melakukan link ke style sheet menggunakan tag <link>. Tag <link> ditulis di bagian head: <link rel="stylesheet" type="text/css" href="cssku.css" /> Browser akan membaca definisi style dari file cssku.css, dan memformat dokumen sesuai dengannya. Style sheet eksternal dapat ditulis dengan editor teks. File tidak mancakup tag-tag html. Style sheet disimpan dengan ekstensi.css. Contoh file style sheet file seperti ini: hr color: sienna p margin-left: 20px body background-image: url("images/back40.gif") JANGAN memberi spasi antara nilai property dan satuan! Jangan tulis "margin-left: 20 px", tapi tulis "margin-left: 20px".
Contoh Contoh 1 <link rel="stylesheet" type="text/css" href="contoh1.css" /> <h1>ini adalah header dengan 36 pt</h1> <h2>ini adalah header dengan warna biru</h2> <p> Ini adalah paragraf dengan left margin sama dengan 50 piksel File style sheet (contoh1.css): body background-color: yellow h1 font-size: 36pt h2 color: blue p margin-left: 50px Contoh 2 File HTML ini akan melakukan link ke style sheet dengan tag <link> <link rel="stylesheet" type="text/css" href="contoh2.css" /> <h1>ini adalah header 1</h1> <hr /> <p>anda dapat melihat bahwa style sheet memformat teks <p><a href="http://www.akakom.ac.id" target="_blank">link ke Akakom</a>
File style sheet (contoh2.css): body background-color: tan h1 color:maroon; font-size:20pt hr color:navy p font-size:11pt; margin-left: 15px a:link color:green a:visited color:yellow a:hover color:black a:active color:blue Style Sheet Internal Style sheet internal digunakan pada saat sebuah dokumen mempunyai style unik. Anda definisikan style internal dalam bagian head dengan menggunakan tag <style>, seperti ini: hr color: sienna p margin-left: 20px body background-image: url("images/back40.gif") Sekarang browser akan membaca definisi style, dan memformat dekumen sesuai dengannya. Catatan: Browser umumnya mengabaikan tag yang tidak diketahui. Ini berarti browser tua yang tidak mendukung style, akan mengabaikan tag <style>, tetapi konten tag <style> akan ditampilkan pada halaman. Untuk melindungi browser tua dari penampilan konten adalah dengan menyembunyikannya dalam elemen komentar: <!-- hr color: sienna p margin-left: 20px body background-image: url("images/back40.gif") --> Style Inline Style inline mencampur konten dengan presentasi. Gunakan metode ini pada saat style dipakai untuk sekali kemunculan elemen. Untuk menggunakann style inline Anda gunakan atribut style dalam tag tersebut. Atribut style dapat mencakup sejumlah properti CSS. Berikut contoh bagaimana mengganti warna dan left margin dari paragraf: <p style="color: sienna; margin-left: 20px"> Ini adalah paragraf
Multiple Style Sheet Jika sejumlah property telah diset untuk selector yang sama dalam style sheet berbeda, nilainya akan diturunkan dari style sheet yang lebih spesifik. Sebagai contoh, style sheet eksternal mempunyai property untuk selector h3: h3 color: red; text-align: left; font-size: 8pt Style sheet internal mempunyai property untuk selector h3: h3 text-align: right; font-size: 20pt Jika halaman dengan style sheet internal juga melakukan link ke style sheet eksternal property untuk h3 akan menjadi: color: red; text-align: right; font-size: 20pt Property color diturunkan dari style sheet eksternal sedangkan and text-alignment dan fontsize diambil dari style sheet internal.
Background CSS Property background CSS mendefinisikan efek background dari elemen. Property Background CSS Property background mengijinkan Anda mengontrol warna background dari elemen, menset image sebagai background, mengulang image background secara vertikal atau horisontal, dan posisi image pada halaman. Browser yang mendukung: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Bilangan dalam kolom "W3C" menunjukkan rekomendasi CSS yang mana property itu didefinisikan (CSS1 atau CSS2). Property Deskripsi Value IE F N W3C background backgroundattachment background-color background-image background-position background-repeat Property singkatan untuk setting seluruh property background dalam satu deklarasi Menset apakah image background diset tetap atau scroll pada sisa halaman Menset background color dari elemen Menset image sebagai background Menset titik awal dari background image Menset bagaimana background image akan diulang background-color background-image background-repeat backgroundattachment background-position scroll fixed color-rgb color-hex color-name transparent url(url) none top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos repeat repeat-x repeat-y no-repeat 4 1 6 1 4 1 6 1 4 1 4 1 4 1 4 1 4 1 6 1 4 1 4 1
Contoh 1. Menset warna background body background-color: yellow h1 background-color: #00ff00 h2 background-color: transparent p background-color: rgb(250,0,255) <h1>ini adalah header 1</h1> <h2>ini adalah header 2</h2> <p>ini adalah paragraf 2. Menset image sebagai background body background-image: url('bgdesert.jpg')
3. Bagaimana mengulang image sebagai background body background-image: url('bgdesert.jpg'); background-repeat: repeat 4. Bagaimana mengulang background image hanya secara vertikal body background-image: url('bgdesert.jpg'); background-repeat: repeat-y 5. Bagaimana mengulang background image hanya secara horisontal body background-image: url('bgdesert.jpg'); background-repeat: repeat-x
6. Bagaimana menampilkan background image hanya sekali body background-image: url('bgdesert.jpg'); background-repeat: no-repeat 7. Bagaimana meletakkan background image body background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; <p><b>catatan:</b> Agar bekerja pada Mozilla, property backgroundattachment harus diset ke "fixed".
8. Bagaimana memset posisi background image menggunakan % body background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; <p><b>note:</b> For this to work in Mozilla, the backgroundattachment property must be set to "fixed". 9. Bagaimana menset posisi background image menggunakan piksel body background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; <p><b>note:</b> For this to work in Mozilla, the backgroundattachment property must be set to "fixed".
10. Bagaimana menset background image secara tetap, sehingga image tidak scroll body background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed 11. Semua property background dalam satu deklarasi body background: #00ff00 url('smiley.gif') no-repeat fixed center;
Text CSS Property Text CSS Property-property teks CSS mendefinisikan kemunculan teks. Property-property teks CSS mengijinkan Anda untuk mengontrol kemunculan teks. Dengan property ini Anda bisa mengubah warna teks, menambah atau mengurangi spasi antar huruf dalam teks, meratakan teks, mendekorasi teks, menambah indentasi baris pertama dalam teks, dan lainnya. Browser yang mendukung: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Bilangan dalam kolom "W3C" menunjukkan rekomendasi CSS yang mana property itu didefinisikan (CSS1 atau CSS2). Property Deskripsi Value IE F N W3C color Menset warna teks color 3 1 4 1 direction Menset arah teks ltr rtl line-height Menset jarak antar baris normal number length % letter-spacing text-align text-decoration text-indent text-shadow text-transform unicode-bidi white-space word-spacing Menambah atau mengurangi spasi antar huruf Meratakan teks dalam elemen normal length left right center justify Menambah dekorasi ke teks none underline overline line-through blink Menambah indentasi baris pertama dari teks dalam elemen Mengontrol huruf dalam elemen Menset bagaimana menangani spasi putih yang ada dalam elemen Menambah atau mengurangi spasi antar kata length % none color length none capitalize uppercase lowercase normal embed bidi-override normal pre nowrap normal length 6 1 6 2 4 1 4 1 4 1 6 1 4 1 4 1 4 1 4 1 4 1 4 1 4 1 4 1 5 2 5 1 4 1 6 1 6 1
Contoh 1. Menset warna teks h1 color: #00ff00 h2 color: #dda0dd p color: rgb(0,0,255) <h1>ini adalah header 1</h1> <h2>ini adalah header 2</h2> <p>ini adalah paragraf 2. Menset background-color pada teks span.highlight background-color:yellow <p> <span class="highlight">ini adalah teks.</span> Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. <span class="highlight">ini adalah teks.</span> 3. Menentukan spasi antar huruf h1 letter-spacing: -3px h4 letter-spacing: 0.5cm
<h1>ini adalah header 1</h1> <h4>ini adalah header 4</h4> 4. Menentukan spasi antar baris p.kecil line-height: 90% p.besar line-height: 200% <p> Ini adalah paragraf dengan tinggi baris standar. Tinggi baris default kebanyakan browser sekitar 110% sampai 120%. Ini adalah paragraf dengan tinggi baris standar. Ini adalah paragraf dengan tinggi baris standar. <p class="kecil"> Ini adalah paragraf dengan tinggi baris lebih kecil. Ini adalah paragraf dengan tinggi baris lebih kecil. Ini adalah paragraf dengan tinggi baris lebih kecil. Ini adalah paragraf dengan tinggi baris lebih kecil. Ini adalah paragraf dengan tinggi baris lebih kecil. <p class="besar"> Ini adalah paragraf dengan tinggi baris lebih besar. Ini adalah paragraf dengan tinggi baris lebih besar. Ini adalah paragraf dengan tinggi baris lebih besar. Ini adalah paragraf dengan tinggi baris lebih besar. Ini adalah paragraf dengan tinggi baris lebih besar. 5. Perataan Teks h1 text-align: center h2 text-align: left h3 text-align: right
<h1>ini adalah header 1</h1> <h2>ini adalah header 2</h2> <h3>ini adalah header 3</h3> 6. Dekorasi teks h1 text-decoration: overline h2 text-decoration: line-through h3 text-decoration: underline h4 text-decoration: blink a text-decoration: none <h1>ini adalah header 1</h1> <h2>ini adalah header 2</h2> <h3>ini adalah header 3</h3> <h4>ini adalah header 4</h4> <p><a href="http://www.akakom.ac.id">link ke Akakom</a> 7. Indentasi teks p text-indent: 1cm <p>
Ini adalah kalimat dalam paragraf. Ini adalah kalimat dalam paragraf. Ini adalah kalimat dalam paragraf. Ini adalah kalimat dalam paragraf. Ini adalah kalimat dalam paragraf. 8. Mengontrol huruf dalam teks p.uppercase text-transform: uppercase p.lowercase text-transform: lowercase p.capitalize text-transform: capitalize <p class="uppercase">ini adalah kalimat dalam paragraf. <p class="lowercase">ini adalah kalimat dalam paragraf. <p class="capitalize">ini adalah kalimat dalam paragraf. 9. Menset arah teks dari elemen div.one direction: rtl div.two direction: ltr <div class="one">sejumlah teks. Arah kanan-ke-kiri.</div>
<div class="two">sejumlah teks. Arah kiri-ke-kanan.</div> 10. Menambah spasi putih antar kata p word-spacing: 30px <p> Ini adalah kalmat. Ini adalah kalimat. 11. Membuat non-aktif teks menggulung (wrapping) didalam elemen p white-space: nowrap <p> Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat. Ini adalah kalmat. Ini adalah kalimat.