CASCADING STYLE SHEET (CSS)

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri.

Suatu style sheet  merupakan tempat dimana kita mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakanya.

Dengan menggunakan Style Sheet kita juga bisa membuat efek-efek sepesial di web. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. 

Stylesheet yang mendukung pada hampir semua hampir semua web Browser adalah Cascading Style Sheet atau sering disebut dengan CSS.Karena CSS telah di standartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).

Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagian desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda.Browser yang paling rewel soal layout css adalah Internet Explorer karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS juga dapat dipasang pada dokumen HTML yang telah jadi.

5.1    Dasar CSS

Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu:

1.      Selector

Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang ada pada dokumen HTML

p {

    ....

}

Pada kode di atas, yang dikatakan selector ialah kode “p”.Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “{}”.

Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen.

2.     Property

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:

p {

color: ...;

font-size: ...;

}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”), yaitu color dan font-size. Kegunaan dari kedua property tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran teks.

3.     Value

Value merupakan nilai dari property yang ingin kita berikan.Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya.Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam format nilaipx atau nilaiem. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:

p {

color: #FFFF00;

font-size: 50px;

}

Catatan

Dalam satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.

5.2  Metode Penulisan CSS

Penulisan sintaks-sintaks CSS pada HTML ada 4 metode yaitu:

1.      Inline Style Sheet

Inline style adalah penerapan kode css pada satu elemen HTML didalam satu halaman HTML CSS didefinisikan langsung pada tag HTML yang bersangkutan.Dengan cara ini kita bisa langsung memberikan style dengan cara memasukkan kode css pada atribut tag HTML. Atribut yang digunakan untuk menyisipkan kode css adalah atribut style, cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.contoh perhatikan contoh skrip HTML berikut:

<html>

<head>

<title>Contoh Bentuk Inline</title>

</head>

<body bgcolor="#3300CC">

<p id=”cth1?>

Paragraf ini merupakan contoh tanpa format CSS

</p>

<p id=”cth2? style="font-size:20px">

Paragraf ini diformat dengan menggunakan css ukuran tekx 20 point </p>

<p id="contoh3?" style="font-size:16px; color:#00FF00">

Paragraf format dengan besar font 16 point, dan menggunakan kode warna  #00FF00 atau hijau</p>

</body>

</html>

Perhatikan tag <p> pada kode program di atas, pada tag tersebut langsung ditambahkan atribut style, untuk mengatur ukuran teks dan warna. Simpan program di atas dengan nama inlinesheet.html pada folder BelajarCss, lalu jalankan maka hasilnya adalah sebagai berikut:

2.     Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.Contoh penggunaan CSS dengan metode Embedded Style Sheet:

<html>

<head>

<title>Contoh Bentuk Embedded</title>

</head>

<style>

body {background:#0000FF; color:#FFFF00; margin-left:0.5in}

h1 {font-size:20pt; color:#FF0000}

p {font-size:12pt; font-family:arial; text-indent:0.5in}

</style>

<body>

<h1 id=”contoh1?>Teks Judul ukuran 20 point berwarna Merah</h1>

<p id=”contoh2?>Paragraf dengan format besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>

<p id=”contoh3?>Semua isi body telah diformat dengan margin kiri 0.5 inch dan latar belakang biru</p>

</body>

</html>

Perhatikan skrip diatas, yang bergaris bawah, skrip tersebut merupakan pendefenisian CSS setelah tag <head> sebelum tag <body>. Style tersebut akan berlaku pada setiap selector (pada contoh di atas selector adalah body, h1, p).

Simpan file diatas dengan nama css1.html di dalam folder Belajar CSS, lalu jalankan hasilnya adalah sebagai berikut:

3.     Linked Style Sheet

Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> … </style> dibuat pada file terpisah dari file HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan dalam format .css. Pada file HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>. Contoh perhatikan skrip berikut ini:

<html>

<head>

     <title>Belajar External CSS</title>

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

</head>

<body>

<h1>Heading Menggunakan CSS beda file</h1>

<p>Format paragraf ini telah diatur pada file style.css</p>

</body>

</html>

Pada skrip di atas ditambahkan baris script berikut <link rel="stylesheet" type="text/css" href="style2.css">diantara tag <head>…</head>.

Skrip tersebut berfungsi untuk menghubungkan file HTML dengan file CSS dengan nama style2.CSS. File style2.css tersebut disimpan pada folder yang sama dengan folder file HTML yang akan menggunakannya. Jika berada di folder yang berbeda, maka kita tinggal mengganti alamat link nya, contoh jika file tersimpan di folder css maka skrip bergaris bawah diatas akan diganti menjadi href=”css/style2.css”.Langkah selanjutnya yang harus kita lakukan adalah membuat file style2.css. Perhatikan code berikut ini:

h1

  {

     text-align:center;

color:blue;

   }

p

  {

text-align:center;

color:red;

   }

Berikut hasil penggunaan CSS:

       Hasil tersebut akan berbeda jika tanpa menggunakan file css. Contoh dari file csslink1.html kita hilangkan skrip link nya hingga menjadi seperti berikut:

<html>

<head>

     <title>Belajar External CSS</title>

</head>

<body>

<h1>Heading Menggunakan CSS beda file</h1>

<p>Format paragraf ini telah diatur pada file style.css</p>

</body>

</html>

Hasilnya adalah sebagai berikut:

4.     Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.

Contoh:

@import "style.css";

Atau

@import url("style.css");

Dengan teknik ini sebuah Style tidak disimpan pada halaman tersebut, namun untuk menghubungkannya dengan halaman web yang kita buat digunakan perintah import yang terdapat pada style CSS. Seperti terlihat pada contoh berikut :

<html>
<head>
<title>Belajar CSS dengan Import</title>

<style type="text/css">

<!-- @import url (http://www.namaurl.com/style.css); -->
</style>
</head>
<body>
<div class=teks>Penerapan Import Style</div>

</body>
</html>

Pada teknik diatas, dokumen HTML akan mengambil atau import style CSS untuk dipergunakan dalam dokumen tersebut. Dimana pada contoh diatas dokumen akan mengimport file style dengan nama style yang berekstensi CSS pada alamat url http://www.namaurl.com dengan menggunakanperintah:

@import url (http://www.nama_situs.com/style.css);

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:

h1 {

color: red;

text-align: left;

font-size: 8pt

}

Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sebagai berikut:

h1 {

text-align: right;

font-size: 20pt

}

Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.

Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagaiberikut:

color: red;

text-align: right;

font-size: 20pt

Diantara keempat metode penggunaan CSS di atas metode yang paling sering digunakan adalah metode yang ke-3 (Linked Style Sheet), karena dengan menggunakan metode tersebut kita dapat menyusun style yang sesuai dengan keinginan kita. Selain itu jika kita memiliki halaman yang sangat banyak kita tidak perlu mengganti style setiap halaman, tapi cukup dengan mengganti file css nya saja maka semua halaman website akan terganti.

5.3  Menyingkat Nilai dari Property

Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:

p {

margin-top    : 10px;

    margin-right  : 20px;

    margin-bottom : 10px;

margin-left   : 20px;

}

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu, sesuai dengan property yang ada. Kode tersebut dapat disingkat  seperti berikut ini:

p {

margin: 10px 20px;

}

Penulisan ini dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Penyingkatan kedua adalah sebagai berikut:

p {

margin: 10px;

}

Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.

Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background.

5.4  Konsep CSS

CSS merupakan:

1        Feature untuk membuat dynamic HTML.

2        Style sheet yang mendeskripsikan bagaimana tampilan document HTML di layar (template)

3        Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru).

5.5   Beberapa Atribut CSS

Atribut	Nilai Atribut	Keterangan
Font-Family	Semua Jenis Huruf (Verdana, Arial, Corier, Dan lain-lain	untuk menentukan jenis huruf
Font-size	8px, 9px, 10px dan seterusnya	Untuk mengatur ukuran huruf
Font-variant	Small caps, Normal-caps	Untuk membuat huruf menjadi capital
Font-weight	Normal, Bold, Border, Lighter	Untuk menentukan ketebalan huruf
Text-decoration	None Underline Overline Line-throught	Tidak ada style Garis bawah Garis diatas teks Garis ditengah teks
Text-align	Left, center, right	Mengatur perataan teks
Font-style	Normal, italic	Gaya huruf
Margin	Angka (dalam satuan cm)	Batas tepi halaman
Margin left		Batas kiri halaman
Margin-top		Batas atas halaman
Margin-botton		Batas bawah halaman
Margin-right		Batas kanan halaman

5.6  Class

Css memperbolehkan penggunaan class, dimana di dalam sebuah class dapat mengelompokkan elemen-elemen dan menerapkan aturan CSS di dalamnya.

Sintak penulisan class pada css adalah sebagai berikut ini:

tag.namaclass {propertie:nilai}

contoh:

p.judul{color:white}

keterangan

p            : merupakan tag paragraph

judul      : merupakan nam class yang sifatnya fleksibel, (atau bisa diubah sesuai dengan keinginan

color     : property atau atribut paragraph

white     : nilai dari property warna

Perhatikan kode program berikut ini:

<html>

<head>

<title>Menggunakan CSS </title>

<style type="text/css">

body {font-family:Verdana; font-size:14px}

p.judul {font-family:arial; font-size:8px;font-weight:bold; text-align:center}

p.peringatan {color:white; background-color:red}

</style>

</head>

<body>

<p class="judul"> CONTOH CLASS PADA CSS</p>

<p>dengan menggunakan class kita lebih leluasa dalam menentukan aturan-aturan dalam pendesainan </p>

<p class="peringatan"> jangan lupa class selalu diawali dengan tanda petik ganda </p>

</body>

</html>

Hasil dari program di atas adalah sebagai berikut: