Anda di halaman 1dari 31

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 Pengantari
Pengenalan CSS.1
Kumpulan Tag CSS7
Daftar Pustaka30

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.
2.
3.
4.

Font (jenis, ketebalan),


Warna teks, latar belakang, dan elemen lainnya,
Text attributes, misalnya spasi antar baris, kata, dan huruf,
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.
2.
3.
4.

Kode HTML menjadi lebih sederhana dan lebih mudah diatur,


Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
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.
2.
3.
4.

Dapat mengandung huruf, angka, atau karakter garis bawah,


Karakter pertama harus berupa huruf atau karakter garis bawah,
Diawali dengan tanda #,
Jangan memberi nama id sama dengan value,

5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.


contoh 4:

<html>
<head>
<styletype="text/css">
<!
#tebal{fontweight:bold;
color:blue;}
#miring{fontstyle:italic;
color:pink;}
>
</style>
</head>
<body>
<h1>Contoh</h1>
<h2id="miring">
Thequickbrownfoxjumpsoverthelazydog
</h2>
<h3id="tebal">
Andthenitfallsintothewell
</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>
<styletype=text/css>
p{color:white;}
body{backgroundcolor:black;}
</style>
</head>
<body>
<p>MenguakRahasiaCSS</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>
<linkrel=stylesheettype=text/css
href=test.css/>
</head>
<body>
<h3>MenguakRahasiaCSS</h3>
</body>
</html>
3. Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<pstyle=background:red;color:black;>Menguak
RahasiaCSS</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

text-decoration

Menambah dekorasi pada teks none


underline
overline
line-through
blink

text-indent

Mengindentasikan baris
pertama teks pada elemen

text-shadow

text-transform

left
right
center
justify

length
%
none
color
length

Mengontrol huruf pada


elemen

unicode-bidi

none
capitalize
uppercase
lowercase
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
font

Deskripsi
Mengeset semua properti

Values
font-style

untuk 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

font-size-adjust

Menspesifikasi aspek nilai


none
untuk sebuah elemen yang
number
akan mempertahankan tinggix dari font pilihan pertama

font-stretch

Memadatakan atau
melonggarkan font-family
yang digunakan

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

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>
<styletype="text/css">
p.italic{fontstyle:italic;fontfamily:"courier";font
size:16;}
p.oblique{fontstyle:oblique}
</style>
</head>
<body>
<pclass="italic">MenguakRahasiaCSS</p>
<pclass="oblique">KumpulanTag</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 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
border-collapse

Deskripsi
Mengeset apakah border tabel collapse
collapse pada satu border
separate
atau terpisah sesuai standar
HTML

Values

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


auto
digunakan untuk
fixed
menampilkan sel tabel, baris,
dan kolom

Contoh penggunaan tag dan property table:


<html>
<head>
<styletype="text/css">
table
{bordercollapse:separate;
emptycells:show}
</style>
</head>
<body>
<tableborder="1">
<tr>
<td>Q1</td>
<td>Q2</td>
</tr>
<tr>
<tdcolspan=2align=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 length


elemen
%

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

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

inside

white

marker ditempatkan pada list outside


list-style-type

Mengeset tipe dari list-item


marker

marker-offset

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>

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
auto
length

<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


border-width
untuk 4-border (yang
border-style
tertutup) dalam satu deklarasi border-color

border-bottom

Mengeset semua properti


untuk bottom-border (yang
bawah aja) dalam satu
deklarasi

border-bottom-color

Mengeset warna dari bottom- border-color


border

border-bottom-style

Mengeset style dari bottom


border

border-bottom-width

Mengeset ketebalan dari garis thin


bottom-border
medium
thick

border-bottom-width
border-style
border-color

border-style

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 leftborder

border-color

border-left-style

Mengeset style dari leftborder

border-style

border-left-width

Mengeset ketebalan dari garis thin


left-border
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 rightborder

border-color

border-right-style

Mengeset style dari rightborder

border-style

border-right-width

Mengeset ketebalan dari garis thin


right-border
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 topborder

border-color

border-top-style

Mengeset style dari topborder

border-style

border-top-width

Mengeset ketebalan dari garis thin


top-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
length
parent element

clip

Mengeset bentuk dari elemen. shape


Elemen diclip menjadi bentuk auto
ini, dan ditampilkan

left

Mengeset sejauh mana pojok auto


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

overflow

Mengeset apa yang terjadi


jika konten dari elemen
melebihi area elemen

position

Menempatkan elemen dengan static


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

right

Mengeset sejauh mana pojok auto

visible
hidden
scroll
auto

kanan dari elemen di


kiri/kanan dari pojok kanan
parent element

%
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 baseline


an element
sub
super
top
text-top
middle
bottom
text-bottom
length
%

z-index

Sets the stack order of an


element

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>

auto
number

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


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


elemen

auto
length
%

line-height

Mengeset jarak antar garis


pada elemen

normal
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


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


none
suatu counter menambahkan identifier number
pada tiap aksi pada selektor

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://kursusblog.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,

______,

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,

(http://jiwandono.wordpress.com/2008/05/02/tag-css/#comment-291,

[online],
diakses

tanggal 23 Maret 2009)


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