mengungkap rahasaia css
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.
“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!
