Friday, September 22, 2017

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

No comments:

Post a Comment