CASCADING STYLE SHEETS (CSS)

CSS (Cascading Style Sheets) adalah sebuah cara untuk memisahkan isi (content) dengan layout dalam suatu halaman web. CSS bisa mengatur dan membuat suatu halaman web tampak sama, meskipun pengujung menggunakan resolusi dan web browser yang berbeda.

Penggunaan CSS ini bisa mengatur penetapan tampilan web secara keseluruhan hanya dengan mengganti atribut yang diinginkan tanpa harus mengganti satupersatu halaman web yang ada.

A. Struktur CSS

Tag penyusun CSS diawali dengan tag <STYLE TYPE > ……. </STYLE>. Tag inilah yang digunakan untuk membuat sebuah halaman HTML menjadi lebih hidup, dengan adanya CSS ini format tampilan halaman HTML kita akan menjadi lebih mudah di manage. Jika dikembangkan dalam skala web yang lebih besar, model CSS ini sangat berguna sekali, sehingga mungkin kita akan mengenal istilah “Template”. Struktur CSS dalam HTML bisa kita lihat dalam format HTML seperti dibawah ini.

<HEAD>

<STYLE TYPE="text/css">

Kriteria-Pilihan {property1:nilai1; property2:nilai2; } </STYLE>

</HEAD>

B. Bagian Pengaturan Dan Deklarasi

Sebuah deklarasi terdiri dari dua bagian yang dipisahkan oleh titik dua:

1. Properti - bagian yang ada sebelum titik dua

2. Nilai - bagian setelah titik dua

Gambar 2.1 Deklarasi CSS

Sebuah aturan terdiri dari dua bagian:

1. Selektor (Selector) - bagian sebelum kurung kurawal

2. Deklarasi (Declaration) - bagian yang terdapat ditengah kurung kurawal

Gambar 2.2 Deklarasi CSS

Semua kode CSS ditempatkan dalam tag <HEAD> .....</HEAD>. Kriteria-Pilihan merupakan tag-tag yang dkenali oleh HTML. Property merupakan tag yang sesuai dengan tag-tag HTML yang dibuat dalam Kriteria pilihan, Contohnya misalnya tag P (tag digunakan untuk kriteria pengaturan paragraph), maka tag-tag yang bersesuaian dengan tag P tersebut adalah font-weight, color, atau line-height . Sedangkan untuk nilai, adalah tag nilai dari tag HTML yang sesuai dengan property.

Property dan nilai dipisahkan dengan tanda titik dua ( : ), sedangkan antar properti yang satu dengan yang lain dipisahkan dengan tanda titik koma ( ; ). Kesemuanya itu (property dan nilai ) disimpan dalam tanda kurung kurawal ({ }).

Berikut ini adalah salah satu Contoh CSS :

P {font-size:12pt; color:blue;}.

• P merupakan tag yang digunakan untuk memformat paragraph.

• Font-size merupakan property untuk menentukan ukuran huruf.

• 12pt merupakan ukuran huruf yang digunakan adalah 12

• Color warna apa yang akan digunakan untuk warna tersebut.

• Blue warna font yang digunakan yaitu biru.

C. Class Selector

Class Selector digunakan untuk menentukan style yang dapat digunakan tanpa menentukan lagi tag HTML sederhana. Bentuk penulisan class adalah dengan menggunakan tanda titik (dot). Dalam Class Selector dimana dalam element yang sama, dapat menerapkan lebih dari satu style. Berikut contoh penggunaan Class Selector

<HTML>

<HEAD>

<TITLE> Class Selector </TITLE> <style type="text/css">

f.times {font-family: times;} f.verdana {font-family: verdana;}

.courier {font-family: courier;} </style>

</HEAD>

<BODY>

<f class="verdana"> Bentuk Huruf Verdana</f><BR> <f class="times"> Bentuk Huruf Times</f><BR>

<f class="courier"> Bentuk Huruf Courier</f><BR> </BODY></HTML>

Berikut hasil penggunaan class selector, seperti dibawah ini:

Gambar 2.3. Hasil Penggunaan Class Selector

D. Id Selector

Id Selector digunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah Id yang bersifat unik. Id Selector hanya bisa dipergunakan pada satu elemen saja pada tiap halaman web. Pendeklarasian Id Selector dengan menggunakan tag # (number sign) didepan nama Selector. Contoh pendeklarasian Id Selector seperti dibawah ini :

#subjudul {font-family: Helvetica;}

Setelah dideklarasikan, selanjutnya dapat diterapkan pada atribut span atau div. Seperti contoh dibawah ini:

<span id="subjudul">Class Selector</span> <div id="subjudul">Id Selector</div>

Berikut hasil penggunaan id Selector selengkapnya seperti dibawah ini :

Gambar 2.4. Hasil Penggunaan Id Selector

E. Pengelompokan

Pengelompokan dalam CSS berfungsi untuk menyingkat berbagai penulisan dari aturan- aturan yang banyak sehinga menjadi lebih singkat. Dalam pengelompokan selector dengan property yang sama dengan memisahkannya dengan tanda koma ( , ). Berikut contoh pengelompokkan tag yang memiliki nilai yang sama.

<STYLE TYPE="text/css">

p { color: yellow; background-color: red; } b { color: yellow; background-color: red; } i { color: yellow; background-color: red; }

</STYLE>

Maka bentuk pengelompokkannya bisa dibuat seperti dibawah ini:

<HTML>

<HEAD>

<TITLE> Pengelompokkan </TITLE> <STYLE TYPE="text/css">

p, b, i { color: yellow; background-color: red; } </STYLE>

</HEAD>

<BODY>

<p>Pengelompokkan tag p</p> <b>Pengelompokkan tag b</b><BR> <i>Pengelompokkan tag i</i>

</BODY>

</HTML>

Berikut hasil penggunaan pengelompokan, selengkapnya seperti dibawah ini :

Gambar 2.5. Hasil Pengelompokan

F. Neting

Neting merupakan suatu cara penyingkatan penulisan dengan menghilangkan kebutuhan akan class atau id yang banyak, sehingga penulisannya menjadi lebih singkat. Dalam pengelompokan selector dengan property yang sama dengan memisahkannya dengan tanda koma ( , ). Berikut contoh pengelompokkan tag yang memiliki nilai yang sama.

#judul { background-color: #cc2; padding: 2em } #judul h1 { color: #ff0; }

#judul p {color: red; font-weight: bold; }

Dengan Neting, maka penulisan akan lebih singkat seperti dibawah ini :

<div id="judul">

<h1>CSS dengan Neting</h1>

<p>Penyingkatan CSS dengan Neting memang lebih mudah</p> <p>Silahkang mencobanya ...</p>

</div>

Berikut contoh lengkap penulisan css dengan neting :

<HTML>

<HEAD>

<TITLE> Pengelompokkan </TITLE> <STYLE TYPE="text/css">

#judul { background-color: #cc2; padding: 2em } #judul h1 { color: #ff0; }

#judul p {color: #339900; font-weight: bold; } </STYLE>

</HEAD>

<BODY>

<div id="judul">

<h1>CSS dengan Neting</h1>

<p>Penyingkatan CSS dengan Neting memang lebih mudah</p> <p>Silahkang mencobanya ...</p>

</div>

</BODY>

</HTML>

Berikut hasil neting, selengkapnya seperti dibawah ini :

Gambar 2.6. Hasil Penggunaan Neting

G. Pewarisan (Inheritance)

Pewarisan yang dimaksud dalam CSS, dimana nilai properti CSS pada sebuah elemen akan diteruskan ke bawah pohon terus ke turunan-turunannya. Sebagai contoh, style sheet kita tetapkan warna hijau pada elemen h1 dan h2. Sekarang, misalkan, kita ingin memberikan warna yang sama ke seluruh dokumen, maka kita dapat melakukannya dengan menuliskan seluruh tipe elemen dalam selektor tersebut seperti dibawah ini:

<STYLE TYPE="text/css">

H1, H2, P, LI { color: green }

</STYLE>

Gambar 2.7. Struktur Pohon Pewarisan

Tetapi, kebanyakan dokumen HTML lebih kompleks dari dokumen contoh kita, dan style sheet anda akan segera bertambah panjang. Maka disinia ada cara yang lebih baik dan lebih singkat. Daripada menetapkan style pada seluruh tipe elemen. Disini kita tetapkan hanya pada induknya saja yaitu, elemen body:

<STYLE

TYPE="text/css"> BODY { color: green }

</STYLE>

Karena semua elemen lain mendapatkan warisan dari elemen body, mereka semua akan mendapatkan warna hijau.

H. Pengaturan Font dan Teks

1) Pengaturan Font

Properti font pada CSS terbagi menjadi beberapa jenis berdasarkan kegunaannya, yaitu:

a. Font-Family

Nilai property berupa nama font yang diinginkan dan generic font, yaitu menentukan beberapa font dengan memisahkan antar nama font dengan koma ( , ). Berikut contoh penulisan font-family :

body {font-family: verdana;}

body {font-family: verdana, arial, helvetica;}

b.	Font-Style
Nilai property yang dimiliki sebanyak 3 (tiga) model, yaitu :
•	Normal	: Untuk Style font Normal [ font-style: normal ]
•	Italic	: Untuk Style font Miring [ font-style: italic ]
•	Oblique	: Untuk Style font Tebal [ font-style: oblique ]

Berikut contoh penulisan font-style :

#tebal {font-style:obliqe;} #miring {font-style:italic;}

c.	Font-Variant
Digunakan untuk membuat varian font. Nilai property yang dimiliki
sebanyak 2 (dua) model, yaitu :
•	Normal	: Untuk Varian font Normal [ font -variant: normal ]
•	Small-Caps : Untuk Varian font berbentuk kapital [ font- variant: small-
caps ]
Berikut contoh penulisan font-style:
#besar {font-variant:small-caps;}
d.	Font-Variant
Digunakan untuk membuat varian font. Nilai property yang dimiliki
sebanyak 2 (dua) model, yaitu :
•	Normal	: Untuk Varian font Normal [ font-variant: normal ]
•	Small-Caps : Untuk Varian font berbentuk kapital [ font- variant: small-
caps]
Berikut contoh penulisan font-style:
#besar {font-variant:small-caps;}
e.	Font-Weight
Digunakan untuk ketebalan suatu font. Nilai property yang dimiliki sebanyak
5 (lima) model, yaitu :
•	Normal	: Untuk ketebalan font Normal.
•	Bold	: Untuk ketebalan font paling tebal.
•	Bolder	: Untuk ketebalan font agak tabel .
•	Lighter	: Untuk ketebalan font lebih tipis .
•	100-900	: Untuk ketebalan font dengan nilai 100 - 900 .

Berikut contoh penulisan font-weight:

#tebals {font-weight:bold;} #agaktebal {font-weight:bolder;} #kurus {font-weight:lighter;} #500 {font-weight:500;

f.	Font-Size
Digunakan untuk menentukan ukuran suatu font. Nilai property yang dimiliki
sebanyak 5 (lima) model, yaitu :
•	Normal	:	Untuk ukuran font Normal
•	Length		: Untuk menentukan dengan ukuran berupa : inci (in),
		centimeter (cm), ems (ems), persentase (%), pixel (px)
		dan		point	(pt).

• Absolute		: Untuk ukuran font dengan ukuran absolute. Memiliki
		-	beberapa model ukuran.
		-	xx-small	font-size: xx-small
		-	x-small	font-size: x-small
		-	medium	font-size: xx-small
	-	-	x-large	font-size: xx-small
• Relative	-		xx-large	font-size: xx-small
• Relative	: Untuk ukuran font dengan ukuran relative. Memiliki
	beberapa model ukuran.
	-		smaller	font-size: x-smaller
	-		large	font-size: larger

Berikut contoh penulisan font-weight:

#s16 {font-size:16px;} #s15 {font-size:15pt;} #sedang { font-size:medium;}

#besars { font-size:xx-large;}

g. Pengaturan Teks

Properti pengaturan teks pada CSS terbagi menjadi beberapa jenis berdasarkan kegunaannya, yaitu:

1. Line-Height

Digunakan untuk mengatur tinggi antar baris font. Nilai property yang dimiliki yaitu:

^• Normal digunakan untuk tinggi font secara normal.

• Number dengan menentukan tinggi font dengan nilai angka desimal.

^• Length dengan menentukan tinggi font dengan nilai persentase atau length (menentukan ukuran dengan point)

Berikut contoh penulisan line-height:

#t25pt {line-height:25px;} #satusetengah {line-height:1.5;} #cepers { line-height:100%;}

2. Text-Decoration

Digunakan untuk mengatur dekorasi suatu teks. Nilai property yang dimiliki yaitu:

• None digunakan bila tidak menginginkan adanya dekorasi teks.

• Underline digunakan bila menginginkan adanya dekorasi garis bawah pada teks.

• Overline digunakan bila menginginkan adanya dekorasi garis atas pada teks.

• Line-Through digunakan bila menginginkan adanya dekorasi garis ditengah dalam teks.

• Blink digunakan bila menginginkan teks terlihat berkedip.

Berikut contoh penulisan text-decoration:

#garisbawah {text-decoration:underline;} #berkedip {text-decoration:blink;} #batal {text-decoration:line-throught;}

3. Text-Transform

Digunakan untuk mengubah bentuk bentuk huruf, kebentuk yang diinginkan. Nilai property yang dimiliki yaitu:

• None digunakan bila tidak menginginkan adanya perubahan bentuk teks.

• Capitalize digunakan bila menginginkan adanya perubahan setiap awal suatu teks kebentuk huruf besar.

• Uppercase digunakan bila menginginkan adanya perubahan setiap kata pada suatu teks kebentuk huruf besar semua.

• Lowercase digunakan bila menginginkan adanya perubahan setiap kata pada suatu teks kebentuk huruf kecil semua.

Berikut contoh penulisan text-transform:

#awalbesar {text-transform:capitalize;} #besarsemua {text-transform:uppercase;} #kecilsemua {text-transform:lowercase;}

4. Text-Align

Digunakan untuk membuat perataan suatu teks yang diinginkan. Nilai property yang dimiliki yaitu:

• Left digunakan menginginkan perataan teks pada sebelah kiri teks.

• Right digunakan menginginkan perataan teks pada sebelah kiri kanan.

• Center digunakan menginginkan teks berada pada pertaaan tengah

• Justify digunakan menginginkan perataan teks hingga ujung garis

tepi.

Berikut contoh penulisan text-align :

#ratakiri {text-align:left;} #ratakanan {text-align:right;}

#ratasemua {text-align:justify;}

5. Text-Indent

Digunakan untuk memberikan bentuk condong kedalam pada awal paragrah text. Nilai property yang dimiliki yaitu:

^• Lenght digunakan menentukan kedalaman lekukan dalam satuan pixel

^• Percentage digunakan menentukan kedalaman lekukan dalam satuan persentase (%).

Berikut contoh penulisan text-transform:

#indent1 {text-indent:16px;} #indent2 {text-indent:15%;}

6. White-Space

Digunakan untuk memperlihatkan secara keseluruhan space dalam suatu teks. Nilai property yang dimiliki yaitu:

• Normal digunakan untuk menyembunyikan space dalam teks.

• Pre digunakan untuk menampilkan keseluruhan space dalam teks

Berikut contoh penulisan text-transform:

#hidespace {white-space: normal;} #unhidespace {white-space: pre;}

2) Pengaturan Hyperlink

Hyperlink digunakan untuk menghubungkan suatu dokumen web ke dokumen web yang lainnya, pada suatu web yang anda buat.

a. Property Hyperlink

Pada hyperlink memiliki 4 (empat) selector yang berbeda dan dapat memiliki pengaruh pada link yang kita buat.

Selector A:LINK

Digunakan untuk menentukan style untuk link normal yang belum dikunjungi atau diklik. Berikut contoh penggunaannya :

a:link {text-decoration: none; color: blue;}

Contoh penulisan diatas untuk menentukan bahwa link secara normal berwarna biru tanpa bentuk teks dekorasi.

Selector A:VISITED

Digunakan untuk menentukan style untuk link yang telah dikunjungi atau diklik. Berikut contoh penggunaannya :

a:visited {text-decoration: none; color: green;}

Contoh penulisan diatas untuk menentukan bahwa link yang telah dikunjugi berwarna hijau tanpa bentuk teks dekorasi.

Selector A:ACTIVE

Digunakan untuk menentukan style untuk link yang aktif ketika kita memilihnya. Berikut contoh penggunaannya :

a:active {text-decoration: none; color: orange;}

Contoh penulisan diatas untuk menentukan bahwa link yang aktif berwarna orange tanpa bentuk teks dekorasi.

Selector A:HOVER

Digunakan untuk menentukan style untuk hover link. Hover link merupakan perubahan keadaan ketika mouse mendekat kesuatu link.. Berikut contoh penggunaannya :

a:hover {text-decoration: none; color: red; font-size:14pt}

Contoh penulisan diatas untuk menentukan bahwa link akan berubah warna menjadi merah serta ukuran font menjadi 14 point dan tanpa bentuk teks dekorasi.

b. Multi Style Hyperlink

Untuk membuat multi style hyperlink pada halaman web yang sama, bisa anda lakukan dengan cara menghubungkan ketika sedang bergantung dalam suatu class tertentu yang aktif, sehingga style link yang diinginkan aktif. Berikut contoh penggunaan multi style hiperlink seperti dibawah ini:

<HTML>

<HEAD>

<TITLE> New Document </TITLE> <STYLE TYPE="text/css">

#L1 a:link {text-decoration: none; color:#3300FF;} #L1 a:visited {text-decoration: none; color:#33CCFF;} #L1 a:active {text-decoration: none; color:#33CC00;} #L1 a:hover {text-decoration: none; color:#FF0000;}

#L2 a:link {text-decoration: none; color:orange;} #L2 a:visited {text-decoration: none; color:magenta;} #L2 a:active {text-decoration: none; color:cyan;}

#L2 a:hover {text-decoration: none; color:yellow} </STYLE>

</HEAD>

<BODY>

<div id="L1">

<A HREF="#"><B>Baca Selengkapnya</B></A> </div>

<div id="L2">

<A HREF="#"><B>Baca Selengkapnya</B></A> </div>

</BODY>

</HTML>

I. Penempatan CSS Dalam HTML

Terdapat 4 (empat) cara yang bisa digunakan untuk menempatkan CSS kedalam dokumen web yang kita buat, yaitu :

1. Inline Style

Merupakan CSS yang dibuat didalam tag HTML, sehingga CSS tidak untuk memformat seluruh elemen dalam dokumen web.

<HTML>

<HEAD>

<TITLE> Inline Style </TITLE> </HEAD>

<BODY>

<FONT STYLE="FONT-SIZE:24px; BACKGROUND-COLOR:orange;

FONT-FAMILY=VERDANA">STMIK NUSA MANDIRI</FONT> </BODY>

</HTML>

2. Internal Style

Merupakan peletakan CSS yang diletakan diantara tag <head> dan tag </head>. Pengaturan CSS dapat digunakan untuk memformat seluruh elemen dalam dokumen web.

<HTML>

<HEAD>

<TITLE> New Document </TITLE> <STYLE TYPE="text/css">

.test { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#0000CC; background-color:#CCFF00}

</STYLE>

</HEAD>

<BODY>

<div class="test">Peletakan dengan Internel Style</div> </BODY>

</HTML>

3. Import Style

Suatu style dibuat dan disimpan diluar dokumen web dan diluar domain web kita. Untuk menghubungkannya dengan menggunakan perintah import, yang terdapat pada style CSS

<HTML>

<HEAD>

<TITLE> New Document </TITLE> <STYLE TYPE="text/css">

@import url (http://www.nusamandiri.ac.id/css/gaya.css); </STYLE>

</HEAD>

<BODY>

<div class="test">Peletakan dengan Import Style</div> </BODY>

</HTML>

4. External Style

Merupakan pemanggilan style CSS yang diletakan diluar dokumen web. Untuk menghubungkannya dengan perintah link rel. Perintah link rel, ini berfungsi untuk menghubungkan style CSS yang berada diluar dokomen web supaya bisa digunakan pada dokumen web yang kita inginkan.