Puji dan syukur saya panjatkan kepada Tuhan YME karena berkat rahmat-Nya, saya dapat menyelesaikan tugas ini dengan baik dan tepat pada waktunya.
Era globalisasi modern memberi peluang bagi jutaan orang di seluruh dunia untuk menikmati teknologi komunikasi praktis dan efisien. Penyebaran informasi, pertukaran ide, dan hubungan internasional menjadi semakin mudah.
Salah satu dari fasilitas komunikasi modern yang paling populer saat ini adalah teknologi internet. Jutaan, bahkan miliaran penduduk di seluruh dunia mengakses internet melalui komputer mereka setiap harinya demi mencari informasi, menjalin hubungan sosial, berbagi pendapat, mencari solusi, dan tujuan-tujuan lainnya.
Oleh karena itu, mempelajari teknik pembuatan web atau situs akan sangat berguna bagi semua kalangan, misalnya pemrograman web menggunakan HTML. Namun sayangnya, mempelajari HTML saja tidaklah cukup untuk berkompetisi dengan jutaan pengguna internet yang potensial. Untuk menambah nilai jual suatu web, Anda wajib mempelajari bahasa pemrograman Cascading Style Sheets (CSS).
CSS memungkinkan Anda untuk mewujudkan tampilan yang lebih kaya, efisien, dan menarik. Dalam karya tulis Menguak Rahasia CSS ini, Anda akan menemukan kumpulan lengkap tag CSS dan kegunaannya, serta petunjuk cara penggunaan tag-tag tersebut.
Selamat membaca dan semoga Anda dapat memetik manfaat dari karya tulis ini.
Jakarta, 22 Maret 2009,
Penulis
Daftar Isi
Kata Pengantar…………………………………………………………………………………………………………………i
Pengenalan CSS……………………………………………………………………………………………………………….1
Kumpulan Tag CSS……………………………………………………………………………………………………………7
Daftar Pustaka………………………………………………………………………………………………………………30
Bab I
Pengenalan CSS
Sebelum Anda dapat menguasai CSS, tentunya Anda harus memahami terlebih dahulu pengertian dari CSS itu sendiri. Dalam bab ini, Anda akan mengetahui sejarah singkat lahirnya CSS, kegunaannya, dan cara penggunaannya.
A. Sejarah Singkat CSS
Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baruoleh Netscape dan Internet Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.
CSS level 1 mendukung pengaturan tampilan dalam hal:
1. Font(jenis, ketebalan),
2. Warna teks, latar belakang, dan elemen lainnya,
3. Text attributes, misalnya spasi antar baris, kata, dan huruf,
4. Posisi text, gambar, tabel, dan elemen lainnya,
5. Marjin, border, dan padding,
Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capabilitykhususnya media-specific CSS.
Bahkan pada perkembangannya, saat ini sudah muncul CSS3.Pekerjaan dari CSS3 dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
B. Pengertian & Manfaat CSS
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:
“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,
5. Digunakan dalam hampir semua web browser.
C. Sintaks & Penempatan Kode CSS
Sintaks CSSterdiri dari tiga bagian:
· selector
· property
· value
Selector adalah elemen atau tag HTML yang akan di-definisi-kan.
Propertyadalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (
:) dan keduanya diapit oleh tanda kurung kurawal ({).Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
selector { property: value}
contoh 1:
p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (
“). Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap propertydapat dilakukan per baris. Sehingga sintaksnya menjadi:selector { property1: value; property2: “value_value”; … }
contoh 2:
p { text-align:center; font-family:“sans serif” }
Aturan-aturan yang berlaku dalam sintaks CSS:
1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
contoh: h1,h2,h3 {color:green}
Class selector
Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:
p.right {text-align: right}
dan
p.left {text-align: left}
Aturan Class selector:
1. Jangan memberi nama class dengan angka,
2. Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).
Atribut ID
Aturan penamaan ID:
1. Dapat mengandung huruf, angka, atau karakter garis bawah,
2. Karakter pertama harus berupa huruf atau karakter garis bawah,
3. Diawali dengan tanda #,
4. Jangan memberi nama id sama dengan value,
5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
contoh 4:
<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
The quick brown fox jumps over the lazy dog
</h2>
<h3 id = "tebal">
And then it falls into the well
</h3>
</body>
</html>
Penempatan kode CSS dalam HTML
Adatiga cara penempatan kode CSS dalam HTML:
1. Internal CSS
Metode penulisan kode CSS langsung dalam fileHTML. contoh:
<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Menguak Rahasia CSS</p>
</body>
</html>
2. Eksternal CSS
Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
</body>
</html>
3. Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<p style=”background: red; color: black;”>Menguak Rahasia CSS</p>
</body>
</html>
Selamat! Anda baru saja berhasil menguak rahasia pertama dari CSS. Setelah membaca bab pertama ini, Anda telah memiliki pengetahuan dasar untuk melanjutkan ke rahasia berikutnya: Kumpulan Tag CSS.
Bab II
Bab II
Kumpulan Tag CSS
“One of the best ways to learn CSS is to jump right in and start to get into the page layouts.”
~ www.css-mastery.com ~
Pada bab kedua ini, Anda dapat menemukan kumpulan lengkap tagCSS beserta contoh-contoh penggunaannya pada beberapa bagian. Bila Anda serius ingin menekuni CSS, sangat disarankan agar Anda terus mencoba setiap tag dan propertinya; selain membantu Anda mengingat-ingat cara penulisan sintaks, metode mencoba akan memperlihatkan kegunaan dari masing-masing tag.
Anda tidak harus menghapal semua tag bila ingin menjadi seorang ahli. Seorang ahli yang sesungguhnya adalah orang yang bisa memanfaatkan tag-tag yang paling sederhana sekalipun untuk menambah nilai estetika suatu website secara efisien. Tidak jarang kita menemukan situs-situs di internet yang terlalu memaksakan penggunaan CSS yang tidak perlu, sehingga malah mempersulit pengunjungnya untuk sekedar membaca.
Berikut ini adalah table-tabel properti dan ‘nilai’dari CSS:
a. Text
| Property | Deskripsi | Values |
color | Mengeset warna teks | color |
direction | Mengeset arah teks | ltr rtl |
line-height | Mengeset jarak antar garis | normal number length % |
letter-spacing | Menambah atau mengurangi jarak antar karakter | normal length |
text-align | Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada elemen | left right center justify |
text-decoration | Menambah dekorasi pada teks | none underline overline line-through blink |
text-indent | Mengindentasikan baris pertama teks pada elemen | length % |
text-shadow | none color length | |
text-transform | Mengontrol huruf pada elemen | none capitalize uppercase lowercase |
unicode-bidi | normal embed bidi-override | |
white-space | Mengeset bagaimana ruang putih di dalam elemen ditangani | normal pre nowrap |
word-spacing | Menambah atau mengurangi jarak antar kata | normal length |
Contoh penggunaan tag dan property text:
<html>
<head>
<style type="text/css">
p.satu {color: #FF0000; letter-spacing:length;}
p.dua {color: #000080; text-decoration:underline;}
p.tiga {text-align:justify; direction:rtl;}
</style>
</head>
<body>
<p class="satu">Everything that humans can imagine</p>
<p class="dua">is a possibility in reality</p>
<p class="tiga">Willy Karen - psychologist</p>
</body>
</html>
b. Pseudo-elements
| Pseudo-element | Kegunaan |
:first-letter | Menambahkan style spesial pada huruf pertama sebuah teks |
:first-line | Menambah spesial style pada baris pertama sebuah teks |
:before | Menyisipkan suatu konten sebelum elemen |
:after | Menyisipkan suatu konten setelah elemen |
Contoh penggunaan tag dan property pseudo-elements:
<html>
<head><style>
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
</style></head>
<body>
<p>Tulisan pertama dalam suatu paragraph.</p>
</body>
</html>
c. Font
| Property | Deskripsi | Values |
font | Mengeset semua properti untuk font(huruf) dalam satu deklarasi | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
font-family | Prioritas list untuk font family dan/atau generic pada suatu elemen | family-name generic-family |
font-size | Mengset ukuran dari font | xx-small x-small small medium large x-large xx-large smaller larger length % |
font-size-adjust | Menspesifikasi aspek nilai untuk sebuah elemen yang akan mempertahankan tinggi-x dari font pilihan pertama | none number |
font-stretch | Memadatakan atau melonggarkan font-family yang digunakan | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
font-style | Mengeset style dari font | normal italic oblique |
font-variant | Menampilkan teks dalam small-caps font atau normal font | normal small-caps |
font-weight | Mengeset ketebalan huruf | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
Contoh penggunaan tag dan property font:
<html>
<head>
<style type="text/css">
p.italic {font-style: italic; font-family:"courier"; font-size:16;}
p.oblique {font-style: oblique}
</style>
</head>
<body>
<p class="italic">Menguak Rahasia CSS</p>
<p class="oblique">Kumpulan Tag</p>
</body>
</html>
d. Background
| Property | Deskripsi | Values |
background | Mengeset semua properti background dalam satu deklarasi | background-color background-image background-repeat background-attachment background-position |
background-attachment | Mengeset kondisi posisi background; antara dapat discroll atau tidak dapat digerakkan dalam halaman | scroll fixed |
background-color | Mengeset warna latar background suatu elemen | color-rgb color-hex color-name transparent |
background-image | Mengeset sebuah gambar menjadi sebuah background | url(URL) none |
background-position | Mengeset posisi background | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
background-repeat | Mengeset apakah/bagaimana background akan diulang | repeat repeat-x repeat-y no-repeat |
Contoh penggunaan tag dan property background:
<html>
<head>
<style>
body { background-color: black; }
p { background-color: gray; }
h2 { background-color: red; }
ul { background-image: url(pics/cssT/smallPic.jpg);
background-repeat: repeat-y; color: green; }
</style>
</head>
<body>
<h2>CSS Backgrounds</h2>
<p>This page has a black background. If you make a black background be sure that
you change the font color from its default black value. On the other hand, you could
just change the backgrounds of the HTML elements, as we have done for the paragraph and the header.</p>
<ul>
<li>This list has a picture on the left</li>
<li>Because it was set to repeat-y</li>
<li>And not to repeat-x</li>
</ul>
</body>
</html>
e. Table
| Property | Deskripsi | Values |
border-collapse | Mengeset apakah border tabel collapse pada satu border atau terpisah sesuai standar HTML | collapse separate |
border-spacing | Mengeset jarak yang memisahkan border sel (khusus untuk model separate-border) | length length |
caption-side | Mengeset posisi dari judul tabel | top bottom left right |
empty-cells | Megeset apakah sel kosong ditampilkan pada tabel atau tidak (khusus untuk model separate-border) | show hide |
table-layout | Mengeset algoritma yang digunakan untuk menampilkan sel tabel, baris, dan kolom | auto fixed |
Contoh penggunaan tag dan property table:
<html>
<head>
<style type="text/css">
table
{border-collapse: separate;
empty-cells: show}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Q1</td>
<td>Q2</td>
</tr>
<tr>
<td colspan=2 align=center>Q3</td>
</tr>
</table>
</body>
</html>
f. Padding
| Property | Deskripsi | Values |
padding | Mengeset semua properti untuk padding (bloknot) dalam satu deklarasi | padding-top padding-right padding-bottom padding-left |
padding-bottom | Mengeset pad bagian bawah dari elemen | length % |
padding-left | Mengeset pad bagian kiri dari elemen | length % |
padding-right | Mengeset pad bagian kanan dari elemen | length % |
padding-top | Mengeset pad bagian atas dari elemen | length % |
Contoh penggunaan tag dan properti padding:
<html>
<head>
<style>
p { padding-left: 45px; border: 1px solid black; }
h2 { padding-top: 80px; border: 1px solid black; }
ul { padding: 25px; border: 1px solid black; }
</style>
</head>
<body>
<h2>CSS Padding</h2>
<p>The header has a top padding of 45px and this paragraph has a padding-left of 80px. This gives
a nice indendation to the paragraph.</p>
<ul>
<li>This list has a uniform</li>
<li>25 pixel margin</li>
<li>Padding is useful for creating necessary white space.</li>
</ul>
</body>
</html>
g. List & Marker
| Property | Deskripsi | Values |
list-style | Mengeset semua properti untuk sebuah list dalam satu deklarasi | list-style-type list-style-position list-style-image |
list-style-image | Mengeset gambar sebagai list-item marker | none url |
list-style-position | Mengeset dimana list-item marker ditempatkan pada list | inside outside |
list-style-type | Mengeset tipe dari list-item marker | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
marker-offset | auto length |
Contoh penggunaan tag dan properti list:
<html>
<head>
<style>
ul { list-style-image: disc; }
ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<h2>CSS Lists</h2>
<ul>
<li>This list has a picture</li>
<li>in the place of bullets</li>
<li>The spacing doesn't look very good.</li>
</ul>
<ol>
<li>This list is </li>
<li>in Upper Roman </li>
<li>These are good for outlines </li>
</ol>
</body>
</html>
h. Border
| Property | Deskripsi | Values |
border | Mengeset semua properti untuk 4-border (yang tertutup) dalam satu deklarasi | border-width border-style border-color |
border-bottom | Mengeset semua properti untuk bottom-border (yang bawah aja) dalam satu deklarasi | border-bottom-width border-style border-color |
border-bottom-color | Mengeset warna dari bottom-border | border-color |
border-bottom-style | Mengeset style dari bottom border | border-style |
border-bottom-width | Mengeset ketebalan dari garis bottom-border | thin medium thick length |
border-color | Mengeset warna dari keseluruhan border | Color |
border-left | Mengeset semua properti untuk left-border (yang kiri aja) dalam satu deklarasi | border-left-width border-style border-color |
border-left-color | Mengeset warna dari left-border | border-color |
border-left-style | Mengeset style dari left-border | border-style |
border-left-width | Mengeset ketebalan dari garis left-border | thin medium thick length |
border-right | Mengeset semua properti untuk right-border (yang kanan aja) dalam satu deklarasi | border-right-width border-style border-color |
border-right-color | Mengeset warna dari right-border | border-color |
border-right-style | Mengeset style dari right-border | border-style |
border-right-width | Mengeset ketebalan dari garis right-border | thin medium thick length |
border-style | Mengeset style dari keseluruhan border | none hidden dotted dashed solid double groove ridge inset outset |
border-top | Mengeset semua properti untuk top-border (yang atas aja) dalam satu deklarasi | border-top-width border-style border-color |
border-top-color | Mengeset warna dari top-border | border-color |
border-top-style | Mengeset style dari top-border | border-style |
border-top-width | Mengeset ketebalan dari garis top-border | thin medium thick length |
border-width | Mengeset ketebalan dari keseluruhan border; terdapat empat jenis ketebalan | thin medium thick length |
Contoh penggunaan tag dan property border:
<html>
<head>
<style type="text/css">
p.pertama {border-style: dashed;border-color: #0000ff}
p.kedua {border-style: solid;border-color: #ff0000 #0000ff}
p.ketiga
{
border-style: dotted;
border-color: #ff0000 #00ff00 #0000ff
}
p.keempat
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class="pertama">Border dengan satu macam warna</p>
<p class="kedua">Border dengan dua macam warna</p>
<p class="ketiga">Border dengan tiga macam warna</p>
<p class="keempat">Border dengan empat macam warna</p>
<p><b>catatan:</b> "Perhatikan warna border-nya"</p>
</body>
</html>
i. Positioning
| Property | Deskripsi | Values |
Bottom | mengeset sejauh mana pojok bawah elemen di atas atau di bawah dari pojok bawah parent element | auto % length |
clip | Mengeset bentuk dari elemen. Elemen diclip menjadi bentuk ini, dan ditampilkan | shape auto |
left | Mengeset sejauh mana pojok kiri dari elemen di kiri/kanan tepi kiri parent element | auto % length |
overflow | Mengeset apa yang terjadi jika konten dari elemen melebihi area elemen | visible hidden scroll auto |
position | Menempatkan elemen dengan posisi static, relative, absolute, atau fixed | static relative absolute fixed |
right | Mengeset sejauh mana pojok kanan dari elemen di kiri/kanan dari pojok kanan parent element | auto % length |
top | Sets how far the top edge of an element is above/below the top edge of the parent element | auto % length |
vertical-align | Sets the vertical alignment of an element | baseline sub super top text-top middle bottom text-bottom length % |
z-index | Sets the stack order of an element | auto number |
Contoh penggunaan tag dan properti positioning:
<html>
<head>
<style>
h3 {
position: absolute;
top: 200px;
left: 150px;}
p {
position: absolute;
top: 75px;
left: 75px;}
</style>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
<p>~anonim~</p>
</body>
</html>
j. Classification
| Property | Deskripsi | Values |
clear | Mengeset sisi dari sebuah elemen dimana elemen ngambang lainnya tidak diperbolehkan | left right both none |
cursor | Menspesifikasi kursor yang ditampilkan | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
display | Mengeset apakah/bagaimana suatu elemen ditampilkan | none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
float | Mengeset dimana sebuah gambar atau teks dimunculkan pada elemen lain | left right none |
position | Mengeset penempatan elemen sebagai posisi yang static, relative, absolute atau fixed | static relative absolute fixed |
visibility | Mengeset apakah suatu elemen ditampilkan atau tidak | visible hidden collapse |
k. Pseudo-classes
| Pseudo-class | Kegunaan |
:active | Menambahkan spesial style kepada elemen yang aktif |
:focus | Menambahkan spesial style kepada elemen selama elemen sedang focus |
:hover | Menambahkan spesial style kepada elemen saat cursor berada di atas elemen tersebut |
:link | Menambahkan spesial elemen kepada link yang belum kena hit |
:visited | Menambahkan spesial style kepada link yang telah dihit |
:first-child | Menambah spesial style pada elemen yang merupakan child pertama dari gabungan beberapa elemen lainnya |
:lang | Membolehkan pemilik(author) untuk menentukan bahasa yang digunakan pada elemen tertentu |
Contoh penggunaan tag dan properti pseudo-classes:
<html>
<head>
<style>
a:link{ text-decoration: none;
color: gray;
}
a:visited{ text-decoration: none;
color: gray;
}
a:hover{ text-decoration: none;
color: green;
font-weight: bolder;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h2>CSS Pseudo Classes or Links</h2>
<p>Arahkan kursor Anda <a href="">ke sini </a> !</p>
</body>
</html>
catatan: Warna ‘ke sini’ akan berubah saat Anda mengarahkan kursor ke atasnya.
l. Dimension
| Property | Deskripsi | Values |
height | Mengeset tinggi dari sebuah elemen | auto length % |
line-height | Mengeset jarak antar garis pada elemen | normal number length % |
max-height | Mengeset tinggi maksimal dari elemen | none length % |
max-width | Mengeset lebar maksimal dari elemen | none length % |
min-height | Mengeset tinggi minimal dari elemen | length % |
min-width | Mengeset lebar minimal dari elemen | length % |
width | Mengeset lebar dari suatu elemen | auto % length |
m. Generated Content
| Property | Deskripsi | Values |
content | Membuat konten dalam dokumen. Digunakan bersama pseudo-element :before dan :after | string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote |
counter-increment | Mengeset berapa banyak suatu counter menambahkan pada tiap aksi pada selektor | none identifier number |
counter-reset | Mengeset nilai yang counter set pada tiap aksi pada selektor | none identifier number |
quotes | Mengeset tipe dari quote | none string string |
n. Outlines
| Property | Deskripsi | Values |
outline | Mengeset semua properti untuk outline dalam satu deklarasi | outline-color outline-style outline-width |
outline-color | Mengeset warna dari outline elemen | color invert |
outline-style | Mengeset style outline dari elemen | none dotted dashed solid double groove ridge inset outset |
outline-width | Mengeset ketebalan outline dari elemen | thin medium thick length |
Setelah Anda menguasai seluruh tag dan properti – beserta value-nya, maka Anda telah menguak rahasia CSS cukup dalam. Tentu saja masih ada beberapa rahasia CSS lagi yang lebih dalam dan kompleks, yang menunggu untuk ditemukan.
Namun, disarankan agar Anda terus melatih diri terlebih dahulu untuk mengenal dan memahami setiap fungsi dari tag-tag, dan mempraktikkannya secara nyata di media komputer. Selamat meneruskan!
Daftar Pustaka
Anonim,______,CSS Button, [online], http://www.erasparsa.com/w3/Style/CSS/Buttons, diakses tanggal 17 Maret 2009)
Abdurachman M., 2008, Dasar CSS (Cascading Style Sheets), [online], (http://kursus-blog.blogspot.com/2008/11/dasar-css-cascading-style-sheet.html, diakses tanggal 17 Maret 2009)
Anonim, ______, Cascading Style Sheets, [online], (http://en.wikipedia.org/wiki/Cascading_Style_Sheets#History, diakses tanggal 17 Maret 2009)
Irvan, ______, A Brief History of CSS, [online], (http://irvan-pengabdian.web.ugm.ac.id/2007/08/20/a-brief-history-of-css.html, diakses tanggal 18 Maret 2009)
Jiwandono, 2008, Tag CSS, [online], (http://jiwandono.wordpress.com/2008/05/02/tag-css/#comment-291, diakses tanggal 23 Maret 2009)
