Memahami Anatomi dan Cara Kerja Cascading Style Sheet
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.
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.
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.
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 { … }
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; }
Inline
Style Sheet
CSS
didefinisikan langsung 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 <p></p> atau paragraf.
<p align="center"
style="color:#303; font-size:24px">SMK
</p>
Embedded
Style Sheet
CSS
didefinisikan terlebih dahulu dalam tag <style> ... </style> di
atas tag <body>, lebih tepatnya didalam tag <head>
External
Style Sheet
<input
type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm"
/>
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 digunakan pada satu aplikasi
berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
Rangkuman
Pada
kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat
disimpulkan menjadi beberapa poin penting seperti berikut :
§ CSS
merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style)
tampilan website.
§ Beberapa manfaat dari penggunaan CSS
- 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
- Dapat
digunakan dalam hampir semua jenis web browser.
§ 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 bagian yaitu: selector,
property, dan value.
Selector{ Property : value; }
§ Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan
§ menulis style (selektor, id dan class)
§ Format
penulisan CSS dengan Selector HTML adalah Nama-elemen
§ Format
penulisan CSS dengan Selector class adalah .nama-class { … }
§ Format
penulisan CSS dengan Selector id adalah #id { … }
§ Penerapan CSS pada sebuah halaman web dapat dilakukan dengan
§ beberapa alternatif di antaranya adalah: inline style sheet,
embedded
style sheet, external style sheet
menyajikan
cascading style sheet untuk memformat tampilan teks dapat dibuat rangkuman
materi sebagai berikut :
§ Agar
lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah
halaman web dapat diberikan sytle dalam kemasan CSS.
§ Pengaturan
style tersebut meliputi banyak properti, diantaranya color, direction,
letter-spacing,line-height, text-align,text-decoration, text-indent,
text-shadow, text-transform, unicode-bidi, vertical-align,white-space,
word-spacing
§ Format
penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai
berikut : selector {color:nilai warna}
§ Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter
atau huruf adalah sebagai berikut selector { letter-spacing:nilai spasi;}
§ Format
penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector
{text-decoration : nilai text-decoration }
§ Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter
atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;}
§ Format
penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector
{ text-indent:nilai indent}
§ . Format
penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector {
text-transform:nilai text transform}
§ format penulisan CSS dengan text-shadow adalah
Selector
{text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan ;}
§ Format penulisan CSS untuk text alignment selector
{text-align:nilai text-align;}
Menyajikan Cascading Style
Sheet untuk Memformat Tampilan Multimedia
Cascading
style sheet pada tampilan gambar
CSS
berperan penting dalam menyajikan informasi dengan visual yang lebih baik,
lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari
dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik
itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat
dituliskan secara inline seperti contoh berikut :
<img
src="nama-file-gambar" width="lebar"
height="tinggi"
alt="text"
title="text" border="1" />
Cascading
style sheet Gambar untuk background
Seperti
penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan
menggunakan dua properti, yaitu background dan background-image. Nilai yang
diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS,
sama seperti pada penambahan font.
div {
background: url(“latar.png”);
background-image:
url(“latar.png”);}
Cascading
style sheet pada tampilan video
Untuk
penerapan Cascading style shee pada elemen video dapat dituliskan secara inline
seperti contih berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video
controls="controls" style="display:block; margin:
0 auto;
width:400px ; heigth:400;" >
<source
src="movie.mp4" type="video/mp4" />
Your browser
does not support the video tag.
</video>
</body>
Rangkuman
Dari paparan materi pembahasan
kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan
multimedia dapat dibuat rangkuman materi sebagai berikut :
§ CSS
berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi
penulisan serta lebih disenangi oleh mesin pencari.
§ Untuk
mengatur format multimedia dapat dituliskan secara inline, embed maupun
eksternal CSS.
§ Pemberian
style pada gambar dapat menggunakan selector <img>
§ Pemberian
style pada video dapat menggunakan selector <video>
§ Penambahan gambar sebagai latar belakang menggunakan dua properti,
yaitu property background image dengan menggunakan tag div seperti format
berikut
div { background-image:
url(“latar.png”); }
Menyajikan Cascading Style Sheet
untuk Memformat Tampilan Form
Cascading
style sheet pada elemen form
Agar form terlihat lebih indah
menarik serta mudah dalam pengontrolan desain salah satunya memberikan style
CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya
pengaturan besar dan jenis border, warna border, lebar form, batas form dari
sisi layout, dan warna background dari form.
Cascading
style sheet pada input text
Textarea mendefinisikan kontrol
input berupa area teks pada form .Elemen form textarea dapat diatur stylenya
dengan menggunakan selector textarea {…}
menyajikan
cascading style sheet untuk memformat tampilan form
§ Agar form
terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah
satunya memberikan style CSS.
§ Dengan
menggunakan style CSS akan mengurangi bebanhalamandankonsumsi bandwidth.
§ style
yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis
border,warna border, lebar form, batas form dari sisi layout, dan warna
background dari elemen-elemen form.
§ Elemen
form dapat diatur stylenya dengan menggunakan selector form {…}.
§ Elemen
form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}.
§ Style yang diberikan pada input textfield diantaranya warna,
background, border, jenis serta ukuran font dan masih banyak atribut lainya
yang bisa digunakan untuk style textfield.
