)
Definisi dan fungsi cascading style
sheet
Cascading Style Sheet atau
lebih sering disebut dengan istilah CSS
merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya
(style) tampilan website.
CSS bukanlah sebuah bahasa
pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada
web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat
pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan
pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat
dilakukan dengan elemen - elemen HTML. Dapat dikatakan bahwa CSS merupakan
pengembangan dari HTML dalam hal format dokumen web. Adanya CSS memudahkan kita
untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan
antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web
akan memberikan beberapa manfaat seperti berikut ini :
·
Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
·
Ukuran file
menjadi lebih kecil sehingga load file lebih cepat.
·
Mudah untuk
mengubah tampilan, hanya dengan mengubah file
CSS saja.
·
Dapat
berkolaborasi dengan JavaScript dan merupakan pasangan
setia HTML.
·
Dapat
digunakan dalam hampir semua jenis web browser.
CSS merupakan sebuah teknologi
internet yang di rekomendasikan oleh
World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di
standarisasikan, internet explorer dan Netscape merilis browser terbaru yang
mendukung standar CSS. Terdapat tiga versi CSS, CSS1, CSS2, dan CSS3. Yaitu :
|
Versi CSS
|
Fitur CSS
|
|
CSS 1
|
Fokus
mengatur pemformatan dokumen HTML, seperti
- Font (Jenis ketebalan).
-Warna,
teks, background dan
elemen
lainnya.
- Text
attributes, misalnya spasi
antar
baris, kata dan huruf.
- Posisi teks, gambar, table dan elemen
lainnya.
- Margin, border dan padiing.
|
|
CSS 2
|
- Mengatur format dokumen untuk
kebutuhan di cetak
dengan printer
- Posisi konten
- Downloadable
- Font huruf
- Table layout
- Media tipe yang
|
|
CSS 3
|
-Sangat
mendukung tampilan desain website
- Animasi warna bahkan sampai animasi
3D
- Menunjang kompabilitas website
dengan smartphone
- CSS math
- CSS obyek model
- Mendukung fungsi multimedia pada
website
- Beberapa efek teks, seperti teks
berbayang, kolom
koran, dan
"word-wrap"
-Jenis
huruf eksternal, sehingga dapat menggunakan
huruf yang
tidak termasuk "web-safe fonts".
-Beberapa
efek pada kotak, seperti
kotak yang
ukurannya dapat
diubah-ubah,
transformasi 2
dimensi
dan 2 dimensi, sudut
tumpul dan
shadow
|
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan
oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung
seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan.
Ketika sebuah web yang semula menggunakan
CSS 2 bermigrasi CSS 3, tidak perlu mengubah apapun.
Dengan adanya CSS mempermudah
pengaturan dan pemeliharaan sebuah website dan tampilannya karena CSS
memisahkan antara bagian pengatur gaya dan isi dari web.
2) Anatomi dari cascading style sheet
Bagian – bagian utama dari sebuah CSS
itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML
dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga
dikenal dengan sebutan selector.
Bagian CSS
|
Keterangan
|
|
Selector
|
- nama-nama yang diberikan
untuk
style-style yang berbeda,
baik itu
style internal maupun
eksternal
- bagian elemen HTML yang
akan
ditunjuk untuk mengatur
style
- dapat berupa class dan ID
|
|
Property
|
- aturan dalam CSS untuk
mengubah selector
yang dipilih
- property mempunyai nilai yang
disebut dengan value
- properties di dalam tanda { }
|
|
value.
|
- Merupakan nilai dari property
CSS
|
CSS memiliki aturan tersendiri dalam penulisan sintaks.
Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector,
property, dan value. Format penulisan
bagian-bagian dari CSS dapat dituliskan sebagai berikut :
Selector{ Property : value; }
Berikut ini sedikit contoh penggunaan
selektor, property, dan value untuk mengatur style pada sebuah form
form{ margin-left:0; }
Dari contoh penggunaan selector,
property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :
-
form : selector yang akan di
atur stylenya
-
margin-left : property yang
digunakan untuk jarak fieldset dari
batas kiri layout
-
0 : nilai dari property margin-left
Dengan adanya CSS memungkinkan untuk
menampilkan halaman yang sama dengan format yang berbeda.
3)
Cara Kerja cascading style sheet
Cara kerja
CSS dimulai saat deklarasi style yang diinginkan dengan menulis style
(selektor, id dan class), maka secara otomatis style tersebut akan
bekerja
pada dokumen HTML. Dengan mengatur
selektor, id, dan class,
untuk
kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML
. Dan secara otomatis pula CSS itu akan bekerja pada file
HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut,
pendefinisian style dilakukan dengan bentuk Selector
{ … } . Dalam hal ini, selector bisa berupa
selector HTML, selector kelas, atau selector ID.
Selector HTML mendefinisikan
style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma
img. Bentuk umumnya :
Contoh :
Nama-elemen { … }h:
Contoh :
Img { Margin-topi: 10px; Float: left; }
Selektor class mendefinisikan kelas yang
bisa berlaku untuk
sebarang
tag HTML. Bentuknya:
Contoh :
.nama-class { … }
Contoh :
.kotak { Border: solid; }
Selector ID
mendefinisikan style bagi elemen yang memiliki ID sesuai
yang tercantum dalam selector. Bentuknya:
#id { … }
Contoh :
#inggris { Font-weight:bold;Font-size:1.2em;}
Berikut contoh yang menggunakan selector class dan
selector ID dapat dilihat di bawah ini.
<html>
<head>
<tittle>Contoh selektor kelas dan ID</tittle>
<style type=”text/css”>
.kotak { Border: solid; Padding: 5px; }
#jawa { Background-color: #ccff66; /*
latarbelakang */}
#inggris { Font-weight: bold; Font-size:
1.2em; }
</style>
</head>
<body>
<div id=”Indonesia” class=”kotak”>Selamat pagi
!</div>
<div id=”jawa”>Sugeng enjing !</div>
<div id=”inggris” class=”kotak”>Good morning
!</div>
</body>
</html>
