MENGUAK RAHASIA CSS

Kata Pengantar

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 baru oleh 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 capability khususnya media-specific CSS.
Bahkan pada perkembangannya, saat ini sudah muncul CSS 3. 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 CSS terdiri dari tiga bagian:

  selector
 property
 value

Selector adalah elemen atau tag HTML yang akan di-definisi-kan.

Property adalah 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 5roperty bagi suatu 5roperty, pisahkan setiap
kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya
lebih mudah dibaca, definisi tiap property dapat 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

Ada tiga cara penempatan kode CSS dalam HTML:

1. Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. 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
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 tag CSS 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 normal

antar karakter length

text-align Mengatur teks agar rata kanan, kiri, lef

tengah, atau kanan-kiri pada right
elemen center
 justify

text-decoration Menambah dekorasi pada teks none

underline
overline
line-through
blink

text-indent Mengindentasikan baris pertama length

teks pada elemen %

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 normal

di dalam elemen ditangani pre
nowrap

word-spacing Menambah atau mengurangi jarak normal

antar kata 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

:afer 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-style
font(huruf) dalam satu deklarasi 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 family-name

dan/atau generic pada suatu generic-family
elemen

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 none

sebuah elemen yang akan number
mempertahankan tinggi-x dari font
pilihan pertama

font-stretch Memadatakan atau melonggarkan normal

font-family yang digunakan 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- normal

caps font atau normal font 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-color
background dalam satu deklarasi background-image
 background-repeat
background-attachment
background-position

background-attachment Mengeset kondisi posisi scroll

background; antara dapat discroll fixed
atau tidak dapat digerakkan dalam
halaman

background-color Mengeset warna latar background color-rgb

suatu elemen color-hex
color-name
transparent

background-image Mengeset sebuah gambar menjadi url(URL)

sebuah background none

background-position Mengeset posisi background top lef

top center
top right
center lef
center center
center right
bottom lef
bottom center
bottom right
x% y%
xpos ypos

background-repeat Mengeset apakah/bagaimana repeat

background akan diulang 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
collapse pada satu border atau separate
terpisah sesuai standar HTML

border-spacing Mengeset jarak yang memisahkan length length

border sel (khusus untuk model
separate-border)

caption-side Mengeset posisi dari judul tabel top

bottom
lef
 right

empty-cells Megeset apakah sel kosong show

ditampilkan pada tabel atau tidak hide
(khusus untuk model separate-
border)

table-layout Mengeset algoritma yang auto

digunakan untuk menampilkan sel fixed
tabel, baris, dan kolom

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-top
padding (bloknot) padding-right
dalam satu deklarasi padding-bottom
padding-lef

padding-bottom Mengeset pad bagian bawah dari length

elemen %

padding-lef Mengeset pad bagian kiri dari length

elemen %

padding-right Mengeset pad bagian kanan dari length

elemen %

padding-top Mengeset pad bagian atas dari length

elemen %

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 list-style-type
sebuah list dalam satu deklarasi list-style-position
list-style-image

list-style-image Mengeset gambar sebagai list-item none

marker url

list-style-position Mengeset dimana list-item marker inside

ditempatkan pada list 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-width
border (yang tertutup) dalam satu border-style
deklarasi border-color

border-bottom Mengeset semua properti untuk border-bottom-width

bottom-border (yang bawah aja) border-style
dalam satu deklarasi border-color

border-bottom-color Mengeset warna dari bottom- border-color

border

border-bottom-style Mengeset style dari bottom border border-style

border-bottom-width Mengeset ketebalan dari garis thin

bottom-border medium
thick
length

border-color Mengeset warna dari keseluruhan Color

border

border-lef Mengeset semua properti untuk border-lef-width

lef-border (yang kiri aja) dalam border-style
satu deklarasi border-color

border-lef-color Mengeset warna dari lef-border border-color

border-lef-style Mengeset style dari lef-border border-style

border-lef-width Mengeset ketebalan dari garis lef- thin

 border medium
thick
length

border-right Mengeset semua properti untuk border-right-width

right-border (yang kanan aja) border-style
dalam satu deklarasi 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 thin

right-border medium
thick
length

border-style Mengeset style dari keseluruhan none

border hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

border-top Mengeset semua properti untuk border-top-width

top-border (yang atas aja) dalam border-style
satu deklarasi 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- thin

border medium
thick
length

border-width Mengeset ketebalan dari thin

keseluruhan border; terdapat medium
empat jenis ketebalan 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 auto
 bawah elemen di atas atau di %
bawah dari pojok bawah parent length
element

clip Mengeset bentuk dari elemen. shape

Elemen diclip menjadi bentuk ini, auto
dan ditampilkan

lef Mengeset sejauh mana pojok kiri auto

dari elemen di kiri/kanan tepi kiri %
parent element length

overflow Mengeset apa yang terjadi jika visible

konten dari elemen melebihi area hidden
elemen scroll
auto

position Menempatkan elemen dengan static

posisi static, relative, absolute, atau relative
fixed absolute
fixed

right Mengeset sejauh mana pojok auto

kanan dari elemen di kiri/kanan %
dari pojok kanan parent element length

top Sets how far the top edge of an auto

element is above/below the top %
edge of the parent element length

vertical-align Sets the vertical alignment of an baseline

element 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 lef
dimana elemen ngambang lainnya right
tidak diperbolehkan both
none

cursor Menspesifikasi kursor yang url

ditampilkan 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 none

suatu elemen ditampilkan 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 lef

atau teks dimunculkan pada right
elemen lain none

position Mengeset penempatan elemen static

sebagai posisi yang static, relative, relative
absolute atau fixed absolute
fixed

visibility Mengeset apakah suatu elemen visible

ditampilkan atau tidak 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 auto
elemen length
%

line-height Mengeset jarak antar garis pada normal

elemen number
length
%

max-height Mengeset tinggi maksimal dari none

elemen length
%

max-width Mengeset lebar maksimal dari none

elemen length
%

min-height Mengeset tinggi minimal dari length

elemen %

min-width Mengeset lebar minimal dari length

elemen %
width Mengeset lebar dari suatu elemen auto
%
length

m. Generated Content

Property Deskripsi Values

content Membuat konten dalam dokumen. string
Digunakan bersama pseudo- url
element :before dan :afer 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 none

counter menambahkan pada tiap identifier number
aksi pada selektor

counter-reset Mengeset nilai yang counter set none

pada tiap aksi pada selektor identifier number

quotes Mengeset tipe dari quote none

string string
n. Outlines

Property Deskripsi Values

outline Mengeset semua properti untuk outline-color
outline dalam satu deklarasi outline-style
outline-width

outline-color Mengeset warna dari outline color

elemen invert

outline-style Mengeset style outline dari elemen none

dotted
dashed
solid
double
groove
ridge
inset
outset

outline-width Mengeset ketebalan outline dari thin

elemen 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)

Anonim, ______, CSS Tutorial, [online], (http://www.tizag.com/cssT, diakses tanggal

23 Maret 2009)