Pengenalan CSS
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 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 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 (gaya
“).
Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap
kombinasi “property:value” dengan tanda titik koma (;).
Untuk membuat definisi
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
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>
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, kumpulan tag CSS
beserta contoh-contoh penggunaannya pada beberapa bagian. 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>CSS</h3>
<p>cascadng style sheets</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 |
Contoh tutorial css :
No comments:
Post a Comment