PEMBAHASAN
A.
PENGERTIAN CSS
Cascading Style Sheet disingkat
sebagai CSS adalah suatu cara untuk membuat format atau layout halaman web
menjadi lebih menarik dan mudah dikelola. CSS adalah
sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium
atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970,
dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa
markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL
(XML User Interface Language). CSS digunakan oleh web programmer dan juga
blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari
presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang
dibangun tanpa kode css.
Di dalam CSS terdapat banyak style.
Style adalah suatu definisi untuk font, color dan lain-lain. Ada dua cara untuk
membuat aturan style, yaitu dengan menuliskan langsung dalam dokumen HTML atau
dengan memisahkannya dalam sebuah file khusus yang berekstensi. Setiap style memiliki nama unik yang disebut
selector. CSS dapat ditulis pada bagian body, head suatu dokumen HTML atau diletakkan
di sebuah file terpisah. Perintah-perintah CSS dibatasi oleh tag <style> dan </style>.
B.
Syntax CSS
CSS memiliki dua bagian utama: pemilih ( Selector
) , dan satu atau lebih deklarasi ( Declaration ).
Selector adalah
bagian pada HTML yang akan menjadi target dari pemformatan oleh CSS, umumnya
adalah berupa elemen HTML. Sedangkan Declaration adalah bagian dari
sintaks CSS yang berisi format-format (styles) yang dinyatakan dengan
Property dan Value. Sebuah baris kode CSS bisa terdapat satu atau banyak
Declaration.
Aturan penulisannya :
§ Selector ditulis pada bagian awal
baris kode CSS
§ Declaration ditulis antara tanda
“{“…. “}”
§ Penulisan Property dan Value pada
Declaration dibatasi dengan tanda “:”
§ Setiap Declaration diakhiri dengan
tanda “;” sebelum ditulis Declaration baru.
Contoh
Berikut adalah contoh penulisan baris kode CSS :
p
{color:blue;text-align:center;}
Atau, agar mudah dibaca bisa ditulis sebagai berikut :
p {
color:blue;
text-align:center;
}
Bentuk
Komentar pada CSS (CSS Comments)
Komentar
pada CSS dimulai dengan tanda “/*” dan diakhiri dengan tanda “*/”, contoh :
/*
ini adalah baris komentar */
p
{
color:blue;
text-align:center;
}
/*
ini adalah baris komentar yang lain */
Jenis-Jenis Selector
pada CSS
Selector pada sintaks
CSS umumnya adalah berupa tag HTML, namun bisa juga berupa atribut ID ataupun
CLASS pada elemen HTML yang akan dilakukan pemformatan tampilan (styling).
a.
Selector berupa Tag
HTML
Semua tag HTML bisa
digunakan sebagai Selector pada CSS, penulisannya adalah dengan menyebutkan
nama dari tag tersebut.
Contoh :
body
{background:#ff0000;}
h1 {font-size:
36px;color:blue;}
p
{color:#333333;text-align:justify;} 4 FREE TO SHARE
b.
Selector berupa atribut ID
Selector
ID digunakan untuk melakukan pendefinisian style pada element HTML
tunggal dan bersifat unique. Selector ID menggunakan atribut ID pada tag
HTML, yang kemudian penyebutan dalam sintaks CSS menggunakan tanda “#” (tanda
pagar).
Contoh
:
File [index.html]
<p>artikel
pada paragraf</>
<p>artikel
pada paragraf</>
<p
id=”penting”>artikel pada paragraf</>
Style.css
P
{
text-align:justify;
color:grey;
}
#penting
{
text-align:center;
color:red;
}
c.
Selector berupa atribut CLASS
Selector CLASS
digunakan untuk mendefinisikan pemformatan elemen HTML dengan membaca atribut
CLASS pada tag HTML. Berbeda dengan Selector ID yang digunakan untuk
pemformatan elemen tunggal, Selector CLASS umumnya digunakan untuk melakukan
pemformatan pada satu atau lebih elemen HTML (group of elements).
Selector CLASS pada penulisan baris kode CSS menggunakan tanda “.” (tanda
titik).
Contoh :
File [index.html]
<p
class="merah">konten pada paragraf ke-1</p>
<p
class="biru"> konten pada paragraf ke-2</p>
<p
class="merah"> konten pada paragraf ke-3</p>
<p
class="biru"> konten pada paragraf ke-4</p>
Style.css
p{
font-size:
12px;
text-alignment:justify;
}
.merah{
color:
red;
}
.biru{
color:
blue;
}
d. Selector untuk Elemen Turunan
Dalam
dokumen HTML, konten sebuah elemen bisa berupa elemen lainnya. Maka diperlukan
cara penulisan tersendiri untuk memilih sebuah elemen HTML yang akan ditetapkan
sebagai target pemformatan dengan CSS. Mari kita lihat contoh di bawah ini :
File
[index.html]
<h1>Judul
dengan <em>bagian penting</em> di dalamnya</h1>
<p>Artikel
yang terdapat <em>bagian penting</em> di dalamnya</p>
Apabila kita ingin melakukan pemformatan pada elemen “em” yang
berada pada elemen “h1”, maka penulisan CSSnya adalah sebagai berikut :
h1
em { color:red; }
C . CARA PENGGUNAAN CSS
Ada tiga cara untuk menerapkan pemformatan CSS pada dokumen HTML, yakni
dengan metode External Style Sheet, Internal Style Sheet dan Inline
Style Sheet.
1.
External Style Sheet
Cara pertama disebut dengan External Style Sheet, yaitu
dengan cara membuat dokumen CSS yang terpisah, kemudian dibuat tautan dengan
tag <link> pada elemen header dalam dokumen HTML yang akan
diterapkan pemformatan dengan CSS tersebut.
Sebagai contoh,
baris kode CSS dinyatakan sebagai berikut :
body {background:lavender;color:#333333;}
h1{color:red;}
Disimpan dalam sebuah dokumen berformat style sheet dengan
nama : mystyle.css Maka, untuk menerapkan pemformatan tersebut ke dalam
dokumen HTML, digunakan tag <link> yang dituliskan pada elemen head sebagai
berikut :
<head>
<title>Contoh
penggunaan CSS External</title>
<link
rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
Note: Dalam contoh ini, file
mystyle.css berada dalam satu folder dengan file HTML-nya.
Dengan cara ini, kita bisa menerapkan pemformatan CSS tersebut ke
banyak dokumen HTML, dan cukup menambahkan tautan untuk tiap masing-masing dokumen.
Keuntungan lainnya, adalah apabila suatu saat kita ingin mengganti format
tampilan halaman web dengan format tampilan yang baru, cukup mengganti tautan
tersebut ke file CSS baru yang akan digunakan.
2.
Internal Style Sheet
Cara kedua adalah dengan menggunakan Internal Style Sheet,
yakni dengan cara menuliskan baris kode CSS pada elemen head menggunakan
tag <style> seperti di bawah ini :
<head>
<style>
body
{background:lavender;color:#333333;}
h1{color:red;}
</style>
<body>
...
Cara ini biasa digunakan untuk melakukan pemformatan pada sebuah
halaman web yang akan ditampilkan berbeda dengan halaman web lainnya. Misalnya,
apabila kita memiliki lima halaman web yang sudah dihubungkan dengan sebuah
file CSS, namun ada satu halaman web yang memiliki format yang sedikit berbeda,
maka digunakanlah Internal style sheet.
3.
Inline Style Sheet
Cara ketiga adalah menggunakan Inline Style Sheet, yaitu
dengan menggunakan atribut “style” pada tag-tag HTML yang akan ditambahkan
pemformatan CSS. Misal, kita akan membuat tampilan elemen h1 menjadi berwarna
merah, maka penulisan elemen h1-nya adalah sebagai berikut :
<h1
style=”color:red” >Ini adalah judul artikel</h1>
Atribut “style” pada tag HTML tersebut, bisa diberikan lebih dari
satu property CSS sama halnya dengan menggunakan Internal Style Sheet ataupun
External Style Sheet.
DAFTAR PUSTAKA
Eprints.binadarma.ac.id/.../1/PERANCANGAN%20%26%20PEMROG.%.
Husni,
2007. Pemrograman database berbasis web. Yogyakarta: Graha Ilmu.
