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
,
,
, dan lainnya. Layout (tata letak) dokumen dianggap itu urusannya browser, tanpa menggunakan tag-tag pemformatan. Browser kemudian menambahkan tag dan atribut baru (seperti 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. 2. 3. 4.
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:
Ini adalah paragraf dengan rata kanan.
Ini adalah paragraf dengan rata kanan.
Catatan: Untuk menggunakan lebih dari satu kelas per elemen yang diberikan, sintaks menjadi:
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":
Heading ini dibuat rata tengah
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 . Tag ditulis di bagian head:
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
Ini adalah header dengan 36 pt
Ini adalah header dengan warna biru
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
Ini adalah header 1
Anda dapat melihat bahwa style sheet memformat teks
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:
<style type="text/css"> 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:
<style type="text/css"> 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:
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
Property singkatan untuk setting seluruh property background dalam satu deklarasi
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
6
1
6
2
line-height
Menset jarak antar baris
normal number length %
4
1
4
1
letter-spacing
Menambah atau mengurangi spasi antar huruf
normal length
4
1
6
1
text-align
Meratakan teks dalam elemen
left right center justify
4
1
4
1
text-decoration
Menambah dekorasi ke teks none underline overline line-through blink
4
1
4
1
text-indent
Menambah indentasi baris pertama dari teks dalam elemen
4
1
4
1
none capitalize uppercase lowercase
4
1
4
1
normal embed bidi-override
5
text-shadow
text-transform
length % none color length
Mengontrol huruf dalam elemen
unicode-bidi
2
white-space
Menset bagaimana menangani spasi putih yang ada dalam elemen
Ini adalah paragraf dengan tinggi baris Tinggi baris default kebanyakan browser Ini adalah paragraf dengan tinggi baris Ini adalah paragraf dengan tinggi baris
standar. sekitar 110% sampai 120%. standar. standar.
Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf
dengan dengan dengan dengan dengan
tinggi tinggi tinggi tinggi tinggi
baris baris baris baris baris
lebih lebih lebih lebih lebih
kecil. kecil. kecil. kecil. kecil.
Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf
