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 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 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 roperty bagi suatu roperty, 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 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
