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 yaitu sebuah hukum untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan gampang dalam pengaturan dikala pendesain sebuah halaman web.

CSS merupakan pengembangan dari HTML dalam hal format dokumen web. Dengan CSS memudahkan kita untuk mengatur dan menentukan sebuah website dan tampilannya alasannya yaitu CSS memisahkan antara bab presentasi dan isi dari web yang dibuat. Selain itu dengan penggunaan dari CSS dalam pembuatan web akan menunjukkan beberapa manfaat menyerupai berikut ini :

1. Kode HTML menjadi lebih sederhana dan lebih gampang diatur.
2. Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
3. Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
5. Dapat dipakai dalam hampir semua jenis web browser.

CSS direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, internet explorer dan Netscape merilis browser terbaru yang mendukung standar CSS. Terdapat tiga versi CSS, CSS1, CSS2, dan CSS3.

No.	Versi CSS	Fitur CSS
1	CSS 1	Fokus mengatur pemformatan dokumen HTML, seperti Font (Jenis ketebalan). Warna, teks, background dan elemen lainnya. Text attributes, contohnya spasi antar baris, kata dan huruf. Posisi teks, gambar, table dan elemen lainnya. Margin, border dan padiing
2.	CSS 2	Mengatur format dokumen untuk kebutuhan di cetak dengan printer, Posisi konten, Downloadable, Font huruf, Table layout, Media tipe yang sangat mendukung tampilan desain website
3.	CSS 3	Animasi warna bahkan hingga animasi 3D Menunjang kompabilitas website dengan smartphone CSS math CSS obyek model Mendukung fungsi multimedia pada website Beberapa imbas teks, menyerupai teks berbayang, kolom koran, dan "word-wrap" Jenis aksara eksternal, sehingga sanggup memakai aksara yang tidak termasuk "web-safe fonts". Beberapa imbas pada kotak, menyerupai  kotak yang ukurannya sanggup diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut tumpul dan shadow

A. Anatomi dari Cascading Style Sheet

Bagian – bab utama dari sebuah CSS itu terdiri dari tiga bab yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector.

No.	Bagian CSS	Keterangan
1	Selector	Adalah nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun eksternal Bagian elemen HTML yang akan ditunjuk untuk mengatur style Selektor sanggup berupa class dan ID
2.	Property	Adalah hukum dalam CSS untuk mengubah selector yang dipilih Property mempunyai nilai yang disebut dengan value properties di dalam tanda { }
3.	Value	Merupakan nilai dari property CSS

B. Cara Kerja CSS

Cara kerja CSS dimulai dikala deklarasi style yang diinginkan dengan menulis style (selektor, id dan class). Dengan mengatur selektor, id, dan class, untuk lalu id dan class tersebut kita sesuaikan dan terapkan pada isyarat HTML . Dan secara otomatis pula CSS itu akan bekerja pada file HTML.

Pendefinisian style sanggup dilakukan pada tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk Selector { … }. Dalam hal ini, selector sanggup berupa selector HTML, selector kelas, atau selectorID. Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan memakai selector HTML beruma img. Bentuk umumnya :

No.	Selektor	Keterangan
1	Selektor class	Nama-elemen { … }h: Contoh :Img {margin-topi: 10px; Float: left; } Selektor class mendefinisikan kelas yang sanggup berlaku untuk sebarang tag HTML. Bentuknya: Contoh : .nama-class { … } Contoh : .kotak {Border: solid; }
2.	Selector ID	Selector ID mendefinisikan style bagi elemen yang mempunyai ID sesuai yang tercantum dalam selector. Bentuknya: #id { … } Contoh : #inggris {font-weight:bold;fontsize: 1.2em;}

Berikut rujukan yang memakai selector class dan selector ID sanggup 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>

Berdasarkan letak kawasan stylenya, penerapan CSS pada sebuah halaman web sanggup dilakukan dengan beberapa alternatif di antaranya yaitu :

1. Inline Style Sheet

CSS didefinisikan pribadi pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen atau paragraf.<p align="center" style="color:#303; font-size:24px">SMK </p>

Saat penulisan CSS diatas, listing isyarat CSS pribadi dipasang di tag HTML, namun hal tidak direkomendasikan alasannya yaitu akan menyulitkan pengaturan style kalau terjadi perubahan tampilan website dikemudian hari.

2. Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>, lebih tepatnya didalam tag <head>. Seperti rujukan di bawah ini.

<html>
<head>
<style>
input.btn {color: #fff; background: #ffa20f; border: 2px outset #BBD16D; font-family: "calibri", Times, serif; font-size: 14px;
font-weight: bold; width : auto;}
<body>
<table>
<tr><td><form ><p><label for="nama">Username</label><input type="text" id="nama" /></p>
<p><label for="KTP">Password</label><input type="text" id="KTP" /></p>
<p><input type="submit" value="Login" class="btn" onClick=parent.location="Home_Iframe.htm" /></p>
</form></td></tr>
</table>
</body>
</html>

3. External Style Sheet

Pada eksternal CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya dipakai pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.

Pada bab head terdapat perintah pemanggilan file “style.css” menyerupai pada listing isyarat berikut :

<style type="text/css">
</style>
<link href="style.css" rel="stylesheet" type="text/css">

CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan. Anatomi CSS terbagi ke dalam tiga bab yaitu: selector, property, dan value.

Share this post