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 padaInternational accesibility and capability khususnya media-specific CSS.
Bahkan pada
perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3dimulai
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 merupakanscript yang
telah embedded dengan HTML. Anda cukup menggunakan aplikasinotepad 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 gayalebih 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.
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!
Tidak ada komentar:
Posting Komentar